/* Fun Reading Skills additions to the shared shell (style.css untouched). */
.unit{margin:10px 4px 6px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.8);border-radius:999px;padding:4px 14px;display:inline-block}
.ttl{font-size:1.3rem;background:rgba(255,255,255,.85);border-radius:999px;padding:2px 18px}
.bigpic{font-size:64px;line-height:1;margin-bottom:4px}
.hear{width:38px!important;height:38px!important;min-width:38px!important;min-height:0!important;padding:0!important;font-size:1rem!important;display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle;margin-left:4px;border-radius:50%!important}
.story{background:var(--card);border-radius:var(--r);padding:14px 16px;margin:0 0 12px;box-shadow:0 4px 0 var(--line);font-size:1.25rem;line-height:1.7}
.story h3{margin:0 0 6px;font-size:1.15rem;color:var(--tc,var(--acc))}
.story p{margin:0}
.w{font:inherit;color:inherit;background:none;border:0;padding:0 1px;border-radius:6px;cursor:pointer}
.w.spoke,.w:active{background:var(--nudge)}
.sentence{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;text-align:center}
.wbig{font:inherit;font-size:1.3rem;font-weight:600;padding:10px 12px;min-height:52px;border-radius:14px;border:3px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.wbig.dim{opacity:.4}.wbig.right{background:var(--okbg);border-color:var(--ok);color:var(--okink)}.wbig.hl{border-color:var(--sun);box-shadow:0 0 0 4px var(--sun)}
.punct p{font-size:1.45rem}
.slot{display:inline-block;min-width:34px;border:3px dashed var(--tc,var(--acc));border-radius:10px;color:var(--tc,var(--acc));padding:0 6px}
.mark{color:var(--ok);font-size:1.7rem}
.choices.tall{display:grid;grid-template-columns:1fr;gap:10px}
.choices.marks{grid-template-columns:repeat(3,1fr)}
.choices.marks .choice{font-size:2.2rem;font-weight:700}
.choices.tall .choice{min-height:58px;font-size:1.15rem}
.expr.build{min-height:64px;flex-wrap:wrap;gap:6px}
.expr.build i{font-style:normal;color:var(--mute)}
.expr.sent span{margin-right:2px}
.wtiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tilebtn.wt{width:auto;min-width:84px;padding:0 16px;font-size:1.3rem}
.nudge{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tag-noun,.tag-verb,.tag-adjective,.tag-adverb{padding:0 8px;border-radius:8px;color:#fff}
.tag-noun{background:#19a8e8}.tag-verb{background:#ff6b3d}.tag-adjective{background:#8b5cf6}.tag-adverb{background:#1fb86a}
/* Pet Pal */
.petgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.petgrid .petpick:last-child{grid-column:1/-1}
.petpick{font:inherit;background:#fff;border:3px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;box-shadow:0 5px 0 var(--line);color:var(--ink)}
.petpick b{font-size:1.1rem}
.petpick .pbody{width:84px;height:84px;display:flex;align-items:center;justify-content:center}
.pemo{font-size:72px;line-height:1}
.pssvg{width:100%;height:100%}
.pet{position:relative;display:inline-flex;align-items:center;justify-content:center}
.pet .pbody{width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.pet.big .pemo{font-size:130px}
.pet.sm .pbody{width:56px;height:56px}.pet.sm .pemo{font-size:48px}.pet.sm .hat{display:none}
.pet .hat{position:absolute;top:-22px;right:-8px;width:64px;height:64px;font-size:48px}
.pet .hat img{width:100%;height:100%;object-fit:contain}
.pet .zz{position:absolute;top:0;right:-20px;font-size:40px;animation:zz 2s infinite}
.pet .hearts{position:absolute;top:-24px;font-size:34px;animation:bob 1s infinite}
.pet.sleepy .pbody{filter:saturate(.9)}
.pet.sleepy .eye{transform-box:fill-box;transform-origin:center;transform:scaleY(.15)}
.pet.joy .pbody,.pet.fetch .pbody{animation:jump .6s 3}
.pet.munch .pbody{animation:munch .25s 4}
.pet.wiggle .pbody{animation:wig .3s 3}
@keyframes jump{50%{transform:translateY(-40px) scale(1.05)}}
@keyframes munch{50%{transform:scale(1.08,.92)}}
@keyframes wig{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes zz{50%{transform:translate(6px,-8px);opacity:.6}}
@keyframes bob{50%{transform:translateY(-6px)}}
.petstage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:200px;margin:8px 0;background:rgba(255,255,255,.6);border-radius:var(--r)}
.ball{position:absolute;font-size:40px;left:10%;bottom:20px;animation:toss 1.2s ease-out}
@keyframes toss{0%{transform:translate(0,0)}50%{transform:translate(110px,-120px)}100%{transform:translate(200px,0)}}
.petsay{color:var(--ink)!important;font-weight:600;font-size:1.2rem}
.petbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.petcard{font:inherit;width:100%;display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--line);border-radius:var(--r);padding:8px 14px;margin:12px 0 0;box-shadow:0 5px 0 var(--line);cursor:pointer;text-align:left;color:var(--ink)}
.petcard>span:nth-child(2){flex:1}.petcard .d{display:block;color:var(--mute);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.pet *,.ball,.nudge{animation:none!important}}
.pimg{width:100%;height:100%;object-fit:contain;display:block}