/* Letter sets (רביעיות א׳–ת׳): a big picture with its word, the letter in the corner, and the other three words of the set below. */
.letters-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.letter-card{position:relative;display:flex;flex-direction:column;aspect-ratio:3/4;overflow:hidden;border:2px solid #3f9ad6;border-radius:14px;background:#fff}
.letter-badge{position:absolute;top:4px;right:9px;color:#e0566f;font-size:34px;font-weight:900;line-height:1}
.letter-main{display:grid;flex:1;min-height:0;padding:16px 10px 0;place-items:center}
.letter-main img{max-width:84%;max-height:100%;object-fit:contain}
.letter-word{padding:2px 4px 6px;font-size:22px;font-weight:800;text-align:center}
.letter-word b,.letter-others b{color:#e0566f}
.letter-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid #3f9ad6;background:#eaf5fc}
.letter-others span{display:grid;gap:1px;justify-items:center;min-width:0;padding:4px 2px}
.letter-others span+span{border-inline-start:1px solid #b6daf0}
.letter-others img{width:100%;height:34px;object-fit:contain}
.letter-others small{overflow:hidden;max-width:100%;font-size:11px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
@media print{.letters-grid{gap:4mm}.letter-card{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.letter-badge{font-size:24pt}.letter-word{font-size:16pt}.letter-others img{height:11mm}.letter-others small{font-size:8pt}}

/* "The first letter": boards of pictures with a square under each, and letter cards to cut out. */
@font-face{font-family:"Dana Yad";src:url(/fonts/dana-yad/DanaYadAlefAlefAlef-Normal.woff) format("woff");font-display:swap}
.cg-shuffle{align-self:end;min-height:44px;padding:0 16px;border:2px solid #e6dcf5;border-radius:999px;background:#fff;font:inherit;font-weight:800;cursor:pointer}
.cg-level-help{margin:10px 0 0;color:var(--muted);font-size:14px}
.first-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:1;align-content:stretch}
.first-board.big{grid-template-rows:repeat(2,minmax(0,1fr))}
.first-board:not(.big){grid-template-rows:repeat(3,minmax(0,1fr))}
.first-cell{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0;padding:10px;border:2px solid #3f9ad6;border-radius:16px;background:#fff}
.first-cell img{flex:1;min-height:0;width:100%;object-fit:contain}
.first-slots{display:flex;gap:10px;justify-content:center}
.first-slot{display:grid;place-items:center;width:84px;height:84px;border:3px dashed #9aa7b0;border-radius:12px;color:#3f332c;font-size:56px;font-weight:800;line-height:1}
.first-slot.given{border-style:solid;border-color:#3f9ad6;background:#eaf5fc}
.first-tiles{display:grid;grid-template-columns:repeat(4,84px);gap:0;justify-content:center;align-content:start}
.first-tile{display:grid;place-items:center;align-content:center;width:84px;height:84px;border:1px dashed #888;font-weight:800;line-height:1}
.first-tile .print{font-size:48px}
.first-tile .script{margin-top:2px;color:#1f6fa8;font-family:"Dana Yad",cursive;font-size:30px;font-weight:400}
.first-tile.script-only .script{margin:0;color:#3f332c;font-size:60px}
@media print{.first-board{gap:4mm;height:258mm;flex:none}.first-cell{padding:3mm;border-width:.6mm;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.first-slot{width:26mm;height:26mm;font-size:18mm;border-width:.7mm}.first-tiles{grid-template-columns:repeat(5,26mm)}.first-tile{width:26mm;height:26mm;border-width:.3mm}.first-tile .print{font-size:12mm}.first-tile .script{font-size:11mm}.first-tile.script-only .script{font-size:18mm}}

/* Memory pairs (print and script, or a number and its quantity). */
.mem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.mem-card{display:grid;place-items:center;aspect-ratio:1;border:1.5px dashed #888;border-radius:14px;background:#fff;color:#3f332c;line-height:1}
.mem-card .print{font-size:120px;font-weight:800}
.mem-card .script{font-family:"Dana Yad",cursive;font-size:130px}
.mem-card .digit{font-size:110px;font-weight:800}
.ten-frame{display:grid;grid-template-columns:repeat(5,1fr);gap:0;width:84%;border:2px solid #3f332c}
.ten-frame i{display:grid;aspect-ratio:1;border:1px solid #3f332c}
.ten-frame i.on::after{content:"";margin:16%;border-radius:50%;background:#e0566f}
.ten-frame.twenty i:nth-child(n+11).on::after{background:#3f9ad6}
.cg-mode .icon.trace-icon{font-size:24px;line-height:1}

/* Letter pages: the letter to trace in print and in script, and its pictures. */
.trace-page{gap:8px}
.trace-head{display:flex;gap:30px;justify-content:center;align-items:baseline;color:#3f332c;line-height:1}
.trace-head .print{font-size:110px;font-weight:800}
.trace-head .script{color:#1f6fa8;font-family:"Dana Yad",cursive;font-size:120px;font-weight:400}
.trace-label{margin:6px 0 0;font-size:17px}
.trace-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid #b6daf0;border-bottom:2px solid #b6daf0}
.trace-cell,.trace-model{display:grid;place-items:center;aspect-ratio:1;border-inline-start:1px dashed #cfe3f1;line-height:1}
.trace-model{color:#3f332c;font-size:76px;font-weight:800}
.trace-model.script{color:#1f6fa8;font-family:"Dana Yad",cursive;font-size:100px;font-weight:400}
.trace-cell svg{width:100%;height:100%}
.trace-cell text{fill:none;stroke:#8b8b8b;stroke-width:1.2;stroke-dasharray:2.5 2.5}
.trace-cell text.print{font:800 76px Rubik,Arial,sans-serif}
.trace-cell text.script{font:400 100px "Dana Yad",cursive;fill:#c4c4c4;stroke:none}
.trace-pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:auto}
.trace-pics span{display:grid;justify-items:center;gap:4px}
.trace-pics img{width:100%;height:110px;object-fit:contain}
.trace-pics small{font-size:18px;font-weight:700}
.trace-pics b{color:#e0566f}

/* Sound lotto: boards of pictures, two to a page. */
.lotto-letter-pages{display:grid;gap:16px;flex:1;grid-template-rows:repeat(2,minmax(0,1fr))}
.lotto-letter-board{display:flex;flex-direction:column;min-height:0;padding:10px;border:2px solid #3f9ad6;border-radius:16px}
.lotto-letter-board h3{margin:0 0 6px;text-align:center;font-size:16px}
.lotto-letter-grid{display:grid;flex:1;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px}
.lotto-letter-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.lotto-letter-grid span{overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:0;padding:4px;border:1.5px solid #b6daf0;border-radius:10px}
.lotto-letter-grid img{flex:1;min-height:0;width:100%;max-height:120px;object-fit:contain}
.lotto-letter-grid small{font-size:12px;font-weight:600;color:#776b64}

@media print{
  .mem-grid{gap:4mm}.mem-card{border-width:.3mm;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mem-card .print{font-size:38mm}.mem-card .script{font-size:42mm}.mem-card .digit{font-size:34mm}
  .ten-frame{border-width:.5mm}.ten-frame i{border-width:.3mm}
  .trace-page{gap:2mm}.trace-head .print{font-size:30mm}.trace-head .script{font-size:33mm}.trace-label{font-size:12pt;margin-top:1mm}
  .trace-model{font-size:21mm}.trace-model.script{font-size:27mm}.trace-pics img{height:28mm}.trace-pics small{font-size:13pt}
  .trace-row,.trace-pics{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lotto-letter-pages{gap:5mm;height:262mm;flex:none;grid-template-rows:repeat(2,minmax(0,1fr))}
  .lotto-letter-board{border-width:.6mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lotto-letter-grid img{max-height:none}
}

/* The answers page of "the first letter": each board's pictures with the word and the letter. */
.first-solution{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;align-content:start}
.first-solution>div{display:grid;gap:3px;break-inside:avoid}
.first-solution h3{margin:4px 0 0;font-size:14px}
.first-solution>div>span{display:grid;grid-template-columns:34px 90px auto;justify-content:start;gap:8px;align-items:center;font-size:14px;font-weight:600}
.first-solution img{width:34px;height:34px;object-fit:contain}
.first-solution b{color:#e0566f}
.first-solution .first-tile{width:auto;height:auto;border:0;grid-auto-flow:column;gap:8px;justify-content:start;justify-self:start}
.first-solution .first-tile .print{font-size:20px}.first-solution .first-tile .script{margin:0;font-size:18px}
@media print{.first-solution{gap:2mm 6mm}.first-solution h3{font-size:10pt}.first-solution>div>span{grid-template-columns:9mm 26mm auto;font-size:10pt}.first-solution img{width:9mm;height:9mm}.first-solution .first-tile{width:auto;height:auto;border:0}.first-solution .first-tile .print{font-size:6mm}.first-solution .first-tile .script{font-size:5mm}}