/* Selected board invitation and coordinated first-visit guide. Local preview. */
.about-design { background:var(--color-paper); border:var(--stroke-frame) solid var(--color-ink); border-radius:var(--radius-frame); overflow:hidden; color:var(--color-ink); }
.postcard { display:grid; grid-template-columns:.95fr 1.05fr; }
.postcard-invitation { padding:42px; background:var(--color-teal-soft); border-right:2px solid var(--color-ink); display:flex; flex-direction:column; align-items:flex-start; }
.about-design h2 { font:clamp(2.8rem,4.4vw,4.4rem)/1.04 var(--font-display); margin:24px 0 26px; letter-spacing:0; text-align:left; }
.about-design h3 { font:1.3rem/1.2 var(--font-display); margin:0 0 14px; }
.about-label { font:1.15rem/1.3 var(--font-display); color:var(--color-teal-text); }
.about-design p { font:1rem/1.7 var(--font-body); margin:0 0 20px; max-width:62ch; }
.about-design .about-lead { font-size:1.1rem; line-height:1.65; }
.postcard-letter { padding:42px; }
.postcard-letter .about-heading { padding-bottom:20px; border-bottom:1px solid var(--color-divider); margin-bottom:24px; font-size:1.5rem; }
.about-provisions { border-top:1px solid var(--color-divider); padding-top:22px; margin-top:24px; }
.about-provisions p { margin:0; }
.postcard-letter .postcard-ps { font:.9rem/1.5 var(--font-body); color:var(--color-teal-text); margin:24px 0 0; font-weight:600; }
.about-design .invitation-line { font:1.3rem/1.4 var(--font-display); max-width:26ch; margin:24px 0; }
.postcard-signature { font:1rem/1.5 var(--font-display); color:var(--color-teal-text); }
.about-dice { width:88px; height:88px; display:block; transform:rotate(-10deg); }
.about-pawn { width:56px; height:79px; display:block; }
.game-pieces { display:flex; align-items:center; gap:28px; margin:8px 0 12px; }
.game-token { width:40px; height:40px; border:2px solid var(--color-ink); border-radius:50%; background:var(--color-yellow); display:block; box-shadow:0 4px 0 var(--color-ink); transform:rotate(-10deg); }
.table-invitation .game-pieces { border-bottom:2px solid var(--color-teal-text); padding:0 10px 18px; }
/* A single oversized card, rather than repeated boxes. */
.playing-invitation .postcard-invitation { background:var(--color-teal); padding:30px; }
.invitation-card { border:2px solid var(--color-ink); border-radius:16px; background:var(--color-paper); padding:76px 28px 72px; position:relative; flex:1; width:100%; text-align:center; }
.playing-invitation h2 { text-align:center; font-size:clamp(2.6rem,3.5vw,3.6rem); margin:22px 0 28px; }
.playing-invitation .invitation-line { font-size:1.15rem; margin:0 auto 24px; }
.playing-invitation .about-label { display:block; }
.card-corner { position:absolute; width:42px; height:42px; }
.card-corner .about-dice { width:42px; height:42px; transform:none; }
.corner-top { top:18px; left:18px; }
.corner-bottom { bottom:18px; right:18px; transform:rotate(180deg); }
/* A tiny abstract game board — decoration, not navigation. */
.board-invitation .postcard-invitation { background:var(--color-teal-soft); }
.board-invitation h2 { font-size:clamp(2.7rem,4vw,4rem); }
.board-trail { display:flex; gap:12px; align-items:center; margin:10px 0 26px; position:relative; max-width:100%; }
.board-trail::before { content:''; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--color-ink); }
.trail-space { display:grid; place-items:center; width:94px; height:94px; background:var(--color-paper); border:2px solid var(--color-ink); border-radius:10px; z-index:1; }
.trail-space .about-dice { width:60px; height:60px; }
.trail-space .about-pawn { width:40px; height:58px; }
.trail-finish { background:var(--color-yellow); }
@media(max-width:800px) {
 .about-review-top { flex-direction:column; gap:8px; }
 .about-options { grid-template-columns:1fr; }
 .about-dock { bottom:70px; right:12px; gap:6px; }
 .postcard { grid-template-columns:1fr; }
 .postcard-invitation { border-right:0; border-bottom:2px solid var(--color-ink); }
 .postcard-invitation,.postcard-letter { padding:28px; }
 .about-design h2 { font-size:3rem; }
 .playing-invitation .postcard-invitation { padding:24px; }
 .playing-invitation h2 { font-size:2.8rem; }
 .invitation-card { padding:65px 20px; }
 .board-invitation h2 { font-size:3rem; }
}
@media(max-width:400px) {
 .about-review { padding:12px; }
 .postcard-invitation,.postcard-letter { padding:22px; }
 .about-design p,.about-design .about-lead { font-size:.95rem; }
 .about-design h2,.board-invitation h2 { font-size:2.7rem; }
 .playing-invitation .postcard-invitation { padding:16px; }
 .playing-invitation h2 { font-size:2.2rem; }
 .invitation-card { padding:65px 16px; }
 .trail-space { width:70px; height:78px; }
 .board-trail { gap:8px; }
 .game-pieces { gap:20px; }
}

.community-topic { margin-top:24px; }
.community-topic p { margin-bottom:0; }
#what-we-play { scroll-margin-top:24px; }
.join-panel { padding:36px 42px; background:var(--color-paper); border:var(--stroke-frame) solid var(--color-ink); border-radius:var(--radius-frame); }
.join-panel h2 { font:clamp(2rem,3.5vw,3rem)/1.1 var(--font-display); margin:0 0 30px; text-align:left; }
.join-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; list-style:none; margin:0; padding:0; }
.join-steps li { padding:0 26px; border-left:1px solid var(--color-divider); }
.join-steps li:first-child { padding-left:0; border-left:0; }
.join-steps li:last-child { padding-right:0; }
.join-number { display:grid; place-items:center; width:42px; height:42px; border:var(--stroke-component) solid var(--color-ink); border-radius:50%; background:var(--color-yellow); font:1.4rem/1 var(--font-display); margin-bottom:16px; }
.join-steps h3 { font:1.3rem/1.2 var(--font-display); margin:0 0 12px; }
.join-steps p { font:1rem/1.65 var(--font-body); margin:0; }
@media(max-width:800px) {
 .join-panel { padding:28px; }
 .join-steps { grid-template-columns:1fr; }
 .join-steps li,.join-steps li:first-child,.join-steps li:last-child { padding:22px 0 22px 58px; border-left:0; border-top:1px solid var(--color-divider); position:relative; }
 .join-steps li:first-child { padding-top:0; border-top:0; }
 .join-steps li:last-child { padding-bottom:0; }
 .join-number { position:absolute; top:22px; left:0; width:38px; height:38px; }
 .join-steps li:first-child .join-number { top:0; }
 .join-panel h2 { margin-bottom:26px; }
}
@media(max-width:400px) {
 .join-panel { padding:22px; }
 .join-steps p { font-size:.95rem; }
 .join-steps li,.join-steps li:first-child,.join-steps li:last-child { padding-left:48px; }
 .join-number { width:34px; height:34px; font-size:1.2rem; }
}