/* Gamified printables (secret code, mazes, colour by answer, bingo, stepping stones, cards).
   Shared by the paid packs (PDF) and the free sample on each topic's printable page. */
.g-head { display: flex; align-items: center; gap: 4mm; margin: 0 0 2mm; }
.g-head svg.m { width: 24mm; height: 24mm; flex: none; }
.g-title { font: 800 22pt/1.05 "Baloo 2", Fredoka, Nunito, sans-serif; margin: 0; }
.g-joke { font: 700 14pt/1.2 "Baloo 2", Fredoka, Nunito, sans-serif; margin: 1mm 0 0; color: #3b2fa8; }
.g-instr { font-size: 11pt; line-height: 1.35; margin: 0 0 3mm; background: #fff8e0; border: .5mm solid #1a1d2e; border-radius: 3mm; padding: 2mm 3.5mm; }
.g-ans { font-size: 11pt; margin: 0 0 1mm; } .g-ans-small { font-size: 9.5pt; margin: 0; line-height: 1.5; }
/* secret code */
.code-q { margin: 0; padding-left: 7mm; font-size: 14pt; columns: 2; column-gap: 8mm; }
.code-q li { break-inside: avoid; margin: 0 0 5mm; }
.code-q.long { columns: 1; font-size: 11.5pt; } .code-q.long li { margin-bottom: 3mm; }
.code-q .cq { display: block; font-weight: 700; }
.code-q .cc { display: flex; flex-wrap: wrap; gap: 1mm 4mm; margin-top: .8mm; font-size: .92em; }
.code-q .cc b { display: inline-grid; place-items: center; width: 5.6mm; height: 5.6mm; border-radius: 50%; background: #ebe4ff; border: .35mm solid #1a1d2e; font: 800 9pt/1 "Baloo 2", sans-serif; margin-right: .6mm; }
.code-boxes { display: flex; flex-wrap: wrap; gap: 3mm 7mm; justify-content: center; margin-top: 4mm; padding: 3mm; border: .7mm dashed #5a4bd1; border-radius: 4mm; background: #f6f3ff; }
.code-boxes .cw { display: flex; gap: 1.2mm; }
.code-boxes .cb { display: flex; flex-direction: column; align-items: center; }
.code-boxes .cb i { width: 12mm; height: 13mm; border: .6mm solid #1a1d2e; border-radius: 2mm; background: #fff; }
.code-boxes .cb small { font-size: 8pt; font-weight: 700; }
/* answer maze */
.maze-grid { display: grid; grid-template-columns: 52mm 1fr; gap: 5mm; align-items: start; }
.maze-q { margin: 0; padding-left: 6mm; font-size: 14pt; } .maze-q li { margin: 0 0 6mm; }
.maze-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.mz-start, .mz-end { font: 800 11pt "Baloo 2", sans-serif; background: #8ce99a; border: .5mm solid #1a1d2e; border-radius: 99px; padding: 0 3mm; }
.mz-end { align-self: flex-end; background: #ffe066; }
table.maze { border-collapse: separate; border-spacing: 1.4mm; margin: 1mm 0; }
table.maze td { width: 22.5mm; height: 24mm; text-align: center; vertical-align: middle; border: .6mm solid #1a1d2e; border-radius: 3mm; font: 800 13pt/1.05 Nunito, sans-serif; background: #fff; }
table.maze tr:nth-child(odd) td:nth-child(even), table.maze tr:nth-child(even) td:nth-child(odd) { background: #f3f0ff; }
table.maze.solved td { width: 9mm; height: 9mm; font-size: 7.5pt; border-width: .3mm; border-radius: 1.5mm; }
table.maze.solved td.on { background: #8ce99a; }
.ans-maze .mz-start, .ans-maze .mz-end { font-size: 7pt; }
/* colour by answer */
.cba-grid { display: grid; grid-template-columns: 50mm 1fr; gap: 4mm; align-items: start; }
.cba-key .ck { border: .5mm solid #1a1d2e; border-radius: 3mm; padding: 1.5mm 2.5mm; margin: 0 0 2mm; font-size: 12pt; display: grid; grid-template-columns: 7mm 1fr; column-gap: 2mm; align-items: center; }
.cba-key .ck .sw { grid-row: span 3; width: 7mm; height: 7mm; border-radius: 50%; border: .4mm solid #1a1d2e; }
.cba-key .ck b { font: 800 11pt "Baloo 2", sans-serif; text-transform: capitalize; }
table.cba { border-collapse: collapse; }
table.cba td { width: 12.4mm; height: 16.5mm; border: .35mm solid #555; text-align: center; vertical-align: middle; font: 700 10.5pt/1 Nunito, sans-serif; }
table.cba.solved td { width: 4mm; height: 4.6mm; border-width: .2mm; }
.ans-cba { display: inline-block; vertical-align: top; margin-right: 6mm; } .ans-cba p { font-size: 9.5pt; margin: 0 0 1mm; }
/* bingo */
.bingo-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: .4mm dashed #555; border-left: .4mm dashed #555; }
.bcard { border-right: .4mm dashed #555; border-bottom: .4mm dashed #555; padding: 3mm 5mm; }
.bc-h { font: 800 15pt "Baloo 2", sans-serif; text-align: center; letter-spacing: 1mm; color: #e5532f; } .bc-h small { font-size: 9pt; color: #1a1d2e; letter-spacing: 0; }
.bcard table { width: 100%; border-collapse: collapse; } .bcard td { border: .6mm solid #1a1d2e; height: 19mm; text-align: center; font: 800 14pt Nunito, sans-serif; }
.caller { columns: 2; font-size: 10pt; margin: 0; padding-left: 6mm; }
/* stepping stones */
.bank-top { font: 800 11pt "Baloo 2", sans-serif; background: #8ce99a; border: .5mm solid #1a1d2e; border-radius: 3mm; text-align: center; padding: .5mm; }
.bank-top.end { background: #ffe066; margin-top: 1.5mm; }
.river { list-style: none; counter-reset: rv; margin: 1.5mm 0 0; padding: 2mm 3mm; background: repeating-linear-gradient(170deg, #dcefff 0 6mm, #cfe6ff 6mm 12mm); border-radius: 3mm; }
.river li { counter-increment: rv; margin: 0 0 2.4mm; font-size: 11.5pt; }
.river li::before { content: counter(rv) ". "; font-weight: 800; }
.river .sq { font-weight: 700; }
.stones { display: flex; flex-wrap: wrap; gap: 2mm; margin-top: 1mm; }
.stone { background: #fff; border: .5mm solid #1a1d2e; border-radius: 45% 55% 50% 50% / 60% 55% 45% 40%; padding: 1.2mm 4mm; font-size: 10.5pt; }
.river.ans { background: none; padding: 0; } .river.ans li { font-size: 9pt; margin-bottom: 1mm; } .river.ans .stone { padding: .3mm 2mm; font-size: 8.5pt; } .stone.on { background: #8ce99a; font-weight: 800; }
/* matching cards */
.mcards { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 35mm; border-top: .4mm dashed #555; border-left: .4mm dashed #555; }
.mcard { border-right: .4mm dashed #555; border-bottom: .4mm dashed #555; display: grid; place-items: center; text-align: center; padding: 2mm; font: 800 13pt/1.15 Nunito, sans-serif; }
.mcard.q { background: #f3f0ff; } .mcard.a { background: #fff8e0; }
.c-red { background: #ff6b6b; } .c-purple { background: #b197fc; } .c-blue { background: #74c0fc; } .c-yellow { background: #ffe066; } .c-orange { background: #ffa94d; } .c-black { background: #343a40; } .c-pink { background: #faa2c1; } .c-green { background: #8ce99a; }