/* Kalkil — "Lire / Reading" (lire.js). Reuses the little ones' building blocks (petits.css: .ptop .pbtn .ptile .pc .pwin …). */
.m-lire{background:linear-gradient(135deg,#ffb347,#ff6f61);--edge:#d9483b}
.m-lire .sym{font-size:30px}
.lr-none{display:none!important}
#lire{background:linear-gradient(180deg,#fff2d9 0%,#e3f6ff 55%,#f0ffe9 100%);position:relative;overflow:hidden}
body:has(#lire.active){background-attachment:fixed;background:linear-gradient(180deg,#fff2d9 0%,#e3f6ff 55%,#f0ffe9 100%)}
#lire .ptitle{-webkit-text-stroke:2px #d9483b;text-shadow:0 4px 0 #ffb347}
#lire .pbtn{color:#d9483b;box-shadow:0 5px 0 rgba(217,72,59,.22),0 8px 14px rgba(32,51,77,.12)}
#lire .pbtn.icon{border-radius:50%;font-size:0}
#lire .psay{background:#ff6f61;color:#fff;box-shadow:0 5px 0 #d9483b,0 8px 14px rgba(32,51,77,.15)}
#lire .pq{color:#7a2e1f}
.lt-letters{background:#fff3e6;--edge:#ffd0a1}.lt-syl{background:#eef5ff;--edge:#bcd6fb}.lt-words{background:#effbf3;--edge:#b8e8c8}.lt-read{background:#fff0f3;--edge:#ffc2cf}
.lrart{display:flex;align-items:center;justify-content:center;gap:6px;height:100%;font-family:ui-rounded,Nunito,"Arial Rounded MT Bold",Arial,sans-serif}
.lrart b{font-size:54px;line-height:1;font-weight:900;color:#ff6f61;-webkit-text-stroke:1px #fff}
.lrart b.lr-c2{color:#2f80ed}.lrart b.lr-c3{color:#2bb35e}.lrart b.sm{font-size:40px}.lrart b.xs{font-size:24px;color:#7a2e1f;-webkit-text-stroke:0}
.lrart i{font-style:normal;font-size:46px;line-height:1}
.pt-lire{grid-column:span 2;background:#fff3e6;--edge:#ffd0a1;flex-direction:row;justify-content:center;min-height:104px;gap:14px}
.pt-lire .part{width:120px;height:76px;flex:none;display:grid;place-items:center;font-size:52px}
/* play */
.lrshow{flex:1;display:flex;justify-content:center;align-items:center;min-height:0}
.lrpic{font-size:130px;line-height:1.1;filter:drop-shadow(0 6px 10px rgba(32,51,77,.15));animation:lrpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes lrpop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.lrch{flex:1}
.lrshow:not(.hidden)~.lrch,.lrshow:not(.hidden)~.lrsent~.lrch{flex:none;padding-bottom:18px}
.lrch .lrc{padding:8px}
.lrtxt{font-family:ui-rounded,Nunito,"Arial Rounded MT Bold",Arial,sans-serif;font-weight:900;font-size:76px;line-height:1;color:#20334d;letter-spacing:.02em}
.lrtxt.long{font-size:40px}
[data-game="letters"] .lrtxt{font-size:96px}
[data-game="syl"] .lrtxt{font-size:64px}
[data-game="words"] .lrtxt,[data-game="syl"] .lrtxt.long{font-size:clamp(26px,9vw,44px)}
.lrch.n3 .lrc{width:calc(33.3% - 11px);max-width:170px}
[data-game="words"] .lrch.n3,[data-game="syl"] .lrch.n3{flex-direction:column;align-items:center;flex-wrap:nowrap;gap:12px}
[data-game="words"] .lrch.n3 .lrc,[data-game="syl"] .lrch.n3 .lrc{width:100%;max-width:340px;aspect-ratio:auto;min-height:74px;border-radius:24px}
.lrch.pics .lrc{aspect-ratio:1/1}
.lrpic.sm{font-size:clamp(40px,13vw,64px);animation:none}
/* the sentence */
.lrsent{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px 8px;background:rgba(255,255,255,.7);border-radius:28px;padding:18px 12px;margin:4px 0;min-height:120px}
.lrw{font-family:ui-rounded,Nunito,"Arial Rounded MT Bold",Arial,sans-serif;font-weight:900;font-size:clamp(30px,9vw,44px);line-height:1.15;color:#20334d;background:#fff;border-radius:16px;padding:6px 12px;box-shadow:0 4px 0 #e8d9c9;transition:transform .15s,background .2s,color .2s}
.lrw.on{background:#ffc93c;transform:scale(1.12);box-shadow:0 4px 0 #e59f00}
.lrw.next{box-shadow:0 0 0 4px #ff6f61,0 4px 0 #e8d9c9;animation:phint 1.1s ease-in-out infinite}
.lrw.read{background:#c9f2d6;color:#126b35;box-shadow:0 4px 0 #8fd6a8}
.lrw.wob{animation:pwob .5s ease}
[data-game="read"] .lrch{flex:none}
@media (max-height:700px){.lrpic{font-size:84px}.lrtxt{font-size:60px}[data-game="letters"] .lrtxt{font-size:74px}.lrsent{min-height:96px;padding:12px 10px}}
@media (min-height:760px){.lrpic{font-size:150px}}
@media (prefers-reduced-motion:reduce){.lrpic,.lrw.next{animation:none}}
#lire,#lire button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#lire .ptile{min-height:168px}
@media (min-height:760px){#lire .ptile{min-height:200px}#lire .ptile .part{height:110px}}
.lrart b.xs{white-space:nowrap}
.lrshow{background:none;border:0;padding:0;cursor:pointer}
[data-game="read"] .lrsent{flex:1;margin:8px 0}
[data-game="read"] .lrch{padding:6px 0 22px}
.lrpic.sm{white-space:nowrap;font-size:clamp(30px,10vw,52px)}
.lrw{font-size:clamp(34px,10.5vw,52px)}