/* Shared look for the site's reading pages (how to play, ideas, FAQ...). */
@font-face{font-family:'Kalam';src:url(/fonts/kalam-bold.woff2) format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Special Elite';src:url(/fonts/special-elite.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Permanent Marker';src:url(/fonts/permanent-marker.woff2) format('woff2');font-display:swap;}
:root{--ink:#2b1f14;--muted:#6b5738;--paper:#fbf6ea;--card:#fffaf0;--gold:#f2cd7a;--link:#28588f;}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:repeating-linear-gradient(135deg, rgba(43,31,20,0.05) 0 2px, transparent 2px 28px), #e8d6ae;color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;line-height:1.65;font-size:17px;padding:18px 14px 60px;}
.wrap{max-width:760px;margin:0 auto;background:#f1e5c8;border:3px solid var(--ink);border-radius:16px;padding:22px 22px 30px;box-shadow:5px 7px 0 rgba(43,31,20,0.28);}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.brand{font-family:'Permanent Marker',cursive;font-size:1.5rem;color:var(--ink);text-decoration:none;letter-spacing:0.5px;}
.play{margin-left:auto;font-family:'Kalam',cursive;font-weight:700;background:var(--gold);color:var(--ink);border:2.5px solid var(--ink);border-radius:10px;padding:5px 14px;text-decoration:none;box-shadow:2px 3px 0 rgba(43,31,20,0.3);}
nav.links{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:'Special Elite',monospace;font-size:0.82rem;border-top:2px dashed rgba(43,31,20,0.35);border-bottom:2px dashed rgba(43,31,20,0.35);padding:8px 0;margin:6px 0 18px;}
nav.links a{color:var(--ink);text-decoration:none;}
nav.links a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;}
h1{font-family:'Kalam',cursive;font-size:2rem;line-height:1.15;margin:8px 0 4px;}
h2{font-family:'Kalam',cursive;font-size:1.45rem;line-height:1.2;margin:30px 0 6px;}
h3{font-family:'Kalam',cursive;font-size:1.15rem;margin:20px 0 4px;}
.lead{font-size:1.08rem;color:var(--muted);margin-top:0;}
a{color:var(--link);}
li{margin:3px 0;}
.card{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:12px 16px;margin:14px 0;box-shadow:2px 3px 0 rgba(43,31,20,0.2);}
.card h3{margin-top:2px;}
.tip{background:#fff3c9;border-left:5px solid var(--gold);padding:8px 14px;border-radius:6px;margin:12px 0;}
.example{background:#eef6ff;border:2px dashed #7aa3d6;border-radius:10px;padding:10px 14px;margin:12px 0;}
.example p{margin:4px 0;}
ol.ideas,ul.ideas{padding-left:24px;}
ol.ideas li,ul.ideas li{margin:6px 0;}
.toc{columns:2;column-gap:24px;font-size:0.95rem;}
@media (max-width:560px){ .toc{columns:1;} body{font-size:16px;} .wrap{padding:16px 15px 24px;} h1{font-size:1.7rem;} }
dt{font-family:'Kalam',cursive;font-weight:700;font-size:1.1rem;margin-top:16px;}
dd{margin:2px 0 0 0;}
footer{margin-top:34px;padding-top:12px;border-top:2px dashed rgba(43,31,20,0.35);font-size:0.86rem;color:var(--muted);}
footer a{color:var(--muted);}
/* each section is its own card, with a gap between them */
.sec{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:4px 18px 14px;margin:22px 0 0;box-shadow:3px 4px 0 rgba(43,31,20,0.22);}
.sec:nth-of-type(even){transform:rotate(0.25deg);}
.sec:nth-of-type(odd){transform:rotate(-0.25deg);}
.sec > h2{margin:12px 0 8px;padding-bottom:6px;border-bottom:2px dashed rgba(43,31,20,0.3);}
.sec .card{background:#fff;}
.sec > p:last-child,.sec > ul:last-child,.sec > ol:last-child,.sec > dl:last-child{margin-bottom:4px;}
main > .card{margin-bottom:6px;}
@media (max-width:560px){ .sec{padding:2px 13px 12px;margin-top:18px;} .sec:nth-of-type(n){transform:none;} }
dl{margin:0;}
.qa{background:var(--card);border:2.5px solid var(--ink);border-radius:12px;padding:10px 16px 12px;margin:16px 0 0;box-shadow:3px 4px 0 rgba(43,31,20,0.2);}
.qa dt{margin-top:0;padding-bottom:4px;border-bottom:2px dashed rgba(43,31,20,0.25);}
.qa dd{margin-top:6px;}