/* Tamil letters and first words: chart, cards, tracing sheets, flashcards and the game. Printing is handled in the @media print block at the end. */
.tl [hidden]{display:none!important}
.tl-btn{display:inline-block;padding:.45rem 1rem;border:1px solid #b9b19c;border-radius:8px;background:#fff;color:#1d2b3a;font:inherit;cursor:pointer;text-decoration:none}
.tl-btn:hover{background:#f3efe2}
.tl-card{position:sticky;top:.5rem;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.14);min-height:11rem;margin:1rem 0 .4rem;padding:1rem;border:2px solid #efd9a8;border-radius:14px;background:#fff8ec;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.2rem;align-items:center;color:#1d2b3a}
.tl-hint{grid-column:1/-1;margin:0;text-align:center;opacity:.8}
.tl-big{grid-row:1/4;font-size:6.5rem;line-height:1.1;color:#16324f}.tl-rd{font-size:1.4rem;font-weight:700;color:#1b6b5a}.tl-pic{font-size:2.6rem}.tl-wd{font-size:2rem}.tl-wd b{color:#c0392b}.tl-wr2{opacity:.85}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr));gap:.5rem;margin:.4rem 0 1rem}
.tl-key{display:flex;flex-direction:column;align-items:center;padding:.4rem .2rem;border:1px solid #d9d4c8;border-radius:10px;background:#faf7ee;cursor:pointer;color:#1d2b3a;font:inherit}
.tl-key:hover,.tl-key.on{background:#fff0c9;border-color:#d4a92a}.tl-g{font-size:2.2rem;line-height:1.2}.tl-r{font-size:.78rem;opacity:.75}
.tl-jump{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}.tl-jump a{padding:.25rem .7rem;border:1px solid #d6e4ee;border-radius:999px;font-size:.9rem;text-decoration:none;background:#fff}
.tl-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.2rem,1fr));gap:.6rem;margin:.4rem 0 1.2rem}
.tl-w{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.6rem .3rem;border:1px solid #d9d4c8;border-radius:12px;background:#fff;cursor:pointer;color:#1d2b3a;font:inherit}
.tl-w:hover,.tl-w.on{background:#fff0c9;border-color:#d4a92a}.tl-em{font-size:2.3rem;line-height:1.2}.tl-wt{font-size:1.45rem;color:#16324f}.tl-wr{font-size:.85rem;color:#1b6b5a;font-weight:600}.tl-we{font-size:.82rem;opacity:.75}
/* game */
.g-modes{display:flex;flex-wrap:wrap;gap:.6rem}.g-top{font-weight:600}
.g-prompt{display:flex;align-items:center;gap:.8rem}.g-hear{font-size:2.2rem;width:4rem;height:4rem;border-radius:50%;border:2px solid #1b6b5a;background:#fff;cursor:pointer}.g-text{font-size:3rem;color:#16324f}
.g-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:.7rem;margin:.8rem 0}
.g-ch{font-size:3rem;padding:.5rem;border:2px solid #d9d4c8;border-radius:14px;background:#fff;cursor:pointer;line-height:1.2}.g-ch.pic{font-size:3.4rem}
.g-ch.right{background:#d8f2df;border-color:#1b6b5a}.g-ch.wrong{background:#fbe0dc;border-color:#c0392b}.g-fb{min-height:1.6rem;font-weight:600}.g-final{font-size:1.4rem;font-weight:700}
/* tracing sheet: the model letter, five light letters to trace, three empty cells */
.tr-sheet{margin:1rem 0;border:1px solid #cfc9b8;border-radius:8px;overflow:hidden;background:#fff}.tr-name{margin:0;padding:.4rem .7rem;font-size:.85rem;border-bottom:1px solid #cfc9b8;display:none}
.tr-row{display:flex;align-items:stretch;height:5.2rem;border-bottom:1px solid #cfc9b8}.tr-vowels .tr-row{height:5.4rem}.tr-consonants .tr-row{height:3.9rem}
.tr-model{flex:0 0 4.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.4rem;line-height:1;color:#16324f;border-right:1px solid #cfc9b8}.tr-consonants .tr-model{font-size:1.9rem}.tr-model small{font-size:.7rem;color:#1b6b5a;margin-top:.15rem}
.tr-cell{flex:1;display:flex;align-items:center;justify-content:center;font-size:2.4rem;line-height:1;border-right:1px dashed #cfc9b8;background:linear-gradient(to bottom,transparent calc(50% - .5px),#e3dfd2 calc(50% - .5px),#e3dfd2 calc(50% + .5px),transparent calc(50% + .5px))}
.tr-consonants .tr-cell{font-size:1.9rem}.tr-trace{color:#cfcfcf}.tr-cell:last-child{border-right:0}
.tr-act{display:flex;gap:.6rem;flex-wrap:wrap}
/* flashcards */
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.8rem;margin:1rem 0}
.fc-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;padding:.7rem .4rem;border:2px dashed #9a9484;border-radius:10px;background:#fff;text-align:center;break-inside:avoid}
.fc-g{font-size:4rem;line-height:1.1;color:#16324f}.fc-em{font-size:2.2rem}.fc-w{font-size:1.5rem}.fc-w b{color:#c0392b}.fc-r{font-size:.85rem;color:#1b6b5a;font-weight:600}.fc-en{font-size:.8rem;opacity:.75}
@media (max-width:560px){.tl-card{min-height:0;padding:.45rem .7rem;gap:0 .8rem}.tl-big{font-size:3.4rem}.tl-rd{font-size:1.1rem}.tl-pic{font-size:1.5rem}.tl-wd{font-size:1.35rem}.tl-wr2{font-size:.85rem}.tl-hint{font-size:.9rem}.tr-row{height:4.4rem}.tr-model{flex-basis:3.6rem;font-size:1.9rem}.tr-cell{font-size:1.8rem}.tr-cell:nth-child(n+8){display:none}}
@media print{
  .tr-sheet{border:0;margin:0}.tr-name{display:block;font-size:9pt;border-bottom:1px solid #666}
  .tr-vowels .tr-row{height:19.5mm}.tr-consonants .tr-row{height:13.7mm}.tr-row,.tr-model,.tr-cell{border-color:#888}
  .tr-model{flex-basis:19mm;font-size:30pt}.tr-consonants .tr-model{font-size:22pt}.tr-cell{font-size:30pt}.tr-consonants .tr-cell{font-size:22pt}.tr-trace{color:#c4c4c4}.tr-cell:nth-child(n+8){display:flex}
  .tr-model small{font-size:7pt;color:#333}
  .tl-fc .fc-grid{grid-template-columns:repeat(2,1fr);gap:4mm}.tl-fc .fc-card{height:60mm;border-color:#666;padding:2mm}.fc-g{font-size:40pt}.fc-em{font-size:22pt}.fc-w{font-size:15pt}
  .tl-words .tl-wgrid{grid-template-columns:repeat(5,1fr);gap:2mm}.tl-w{break-inside:avoid;border-color:#888;padding:1.5mm}.tl-wt{font-size:12pt}.tl-em{font-size:18pt}.tl-grp h2{break-after:avoid}
}
/* the same Tamil font stack as the verse pages, so letters keep their shape on every device */
.tl [lang="ta"],.tr-model,.tr-cell,.tl-g,.tl-big,.tl-wd,.tl-wt,.fc-g,.fc-w,.g-text,.g-ch{font-family:"Noto Sans Tamil","Nirmala UI","Latha","Tamil Sangam MN","Noto Serif Tamil",system-ui,sans-serif}

.tl-voice{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:.4rem 0}.tl-voice select{max-width:100%;padding:.3rem .4rem;font:inherit}.tl-allv{display:flex;gap:.3rem;align-items:center}