/* علّمني v6 — «وضع الحكاية» */
.st-layer text{font-family:Tajawal,sans-serif!important;font-weight:800!important;stroke:none!important;paint-order:normal!important}
.story .board-wrap{background:#FFF9F1;border-radius:22px;overflow:hidden;box-shadow:0 8px 30px rgba(15,118,110,.14)}
#app.story .p-cmp{display:none!important}
.story #board{overflow:hidden;border-radius:22px}
/* the companion beside the board */
.controls{position:relative}
.s-cmp{display:none;position:absolute;inset-inline-end:0;bottom:-6px;width:70px;z-index:3;pointer-events:none}
.story .s-cmp{display:block}
.s-cmp-c .cmp{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.s-cmp-b{position:absolute;bottom:96%;inset-inline-end:30%;white-space:nowrap;background:#FFFFFF;color:#17302D;font-weight:800;font-size:clamp(12px,3.4vw,16px);padding:6px 11px;border-radius:14px 14px 4px 14px;border:2px solid #14B8A6;box-shadow:0 4px 14px rgba(0,0,0,.12);opacity:0;transform:translateY(6px) scale(.9);transition:opacity .2s,transform .2s}
.s-cmp.say .s-cmp-b{opacity:1;transform:none}
/* reaction poses for the companions */
.cmp.p-gasp .c-armL{transform:rotate(-150deg)}.cmp.p-gasp .c-armR{transform:rotate(150deg)}
.cmp.p-gasp .m-smile{display:none}.cmp.p-gasp .m-o{display:block}.cmp.p-gasp .c-brows{transform:translateY(-4px)}
.cmp.p-gasp .c-eyes{transform:scale(1.12);transform-origin:60px 52px}.cmp.p-gasp .c-all{animation:sGasp .5s ease-out 2}
.cmp.p-worried .c-brows path:first-child{transform:rotate(14deg);transform-origin:49px 41px}.cmp.p-worried .c-brows path:last-child{transform:rotate(-14deg);transform-origin:71px 41px}
.cmp.p-worried .m-smile{display:none}.cmp.p-worried .m-flat{display:block}.cmp.p-worried .c-armR{transform:rotate(-125deg)}.cmp.p-worried .c-all{animation:sShake .5s ease-in-out 3}
.cmp .c-armL,.cmp .c-armR,.cmp .c-brows,.cmp .c-eyes{transition:transform .25s}
@keyframes sGasp{0%{transform:translateY(0)}35%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes sShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
/* music + sound effects control */
.st-snd{display:none;position:absolute;top:8px;inset-inline-end:8px;z-index:4}
.story .st-snd{display:block}
.st-snd-b{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,249,241,.92);color:#0F766E;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.15);position:relative}
.st-snd-b svg{width:21px;height:21px}
.st-snd.off .st-snd-b s{position:absolute;width:26px;height:2.6px;background:#FF6B57;border-radius:2px;transform:rotate(-45deg)}
.st-snd-p{display:none;position:absolute;top:46px;inset-inline-end:0;width:220px;background:var(--card,#fff);color:var(--ink,#17302D);border-radius:16px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);border:1.5px solid var(--line,#EEE3D2)}
.st-snd.open .st-snd-p{display:grid;gap:9px}
.st-snd-p b{font-size:14px}.st-snd-p input{width:100%;accent-color:#0F766E}
.st-snd-m{border:0;border-radius:12px;background:var(--soft,#E7F6F3);color:#0F766E;font-weight:800;padding:8px;font-size:13.5px}
/* home: the story card */
.story5{order:2;background:linear-gradient(135deg,#FFF1D6,#FFE8E3 55%,#E7F6F3);border-radius:22px;padding:12px;display:grid;gap:10px;box-shadow:var(--shadow);border:2px solid #FBD38D}
[data-theme="dark"] .story5{background:linear-gradient(135deg,#3A2C10,#3A1D18 55%,#12302B);border-color:#5A4318}
.st5-h{display:flex;align-items:center;gap:10px}.st5-h b{display:block;font-size:17px;color:var(--ink)}.st5-h small{display:block;color:var(--muted);font-weight:700;font-size:13px}
.st5-ic{width:38px;height:38px;border-radius:12px;background:#F59E0B;color:#fff;display:grid;place-items:center;flex:none}.st5-ic svg{width:22px;height:22px}
.st5-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.st5-card{position:relative;display:flex;flex-direction:column;border:0;padding:0;border-radius:18px;overflow:hidden;background:var(--card);text-align:start;box-shadow:0 3px 12px rgba(0,0,0,.08);transition:transform .15s}
.st5-card:active{transform:scale(.98)}
.st5-th{display:block;width:100%;aspect-ratio:4/3;height:auto}
.st5-t{padding:8px 10px 10px}.st5-t b{display:block;font-size:14.5px;line-height:1.35;color:var(--ink)}.st5-t small{display:block;color:var(--muted);font-weight:700;font-size:12px;margin-top:2px}
.st5-play{position:absolute;top:8px;inset-inline-start:8px;width:34px;height:34px;border-radius:50%;background:rgba(15,118,110,.92);color:#fff;display:grid;place-items:center}.st5-play svg{width:18px;height:18px}
.st5-tg{display:flex;align-items:center;gap:10px;border:2px dashed #F59E0B;background:rgba(255,255,255,.6);border-radius:16px;padding:9px 11px;text-align:start;color:var(--ink)}
[data-theme="dark"] .st5-tg{background:rgba(0,0,0,.2)}
.st5-tg i{flex:none;width:42px;height:24px;border-radius:12px;background:#D6CBB8;position:relative;transition:background .15s}
.st5-tg i:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.st5-tg.on{border-style:solid;background:#FFF7E8}.st5-tg.on i{background:#F59E0B}.st5-tg.on i:after{inset-inline-start:21px}
[data-theme="dark"] .st5-tg.on{background:#3A2C10}
.st5-tg b{display:block;font-size:15px}.st5-tg small{display:block;color:var(--muted);font-weight:700;font-size:12.5px}
@media (min-width:700px){.s-cmp{width:86px}}
@media (min-width:1000px){.s-cmp{width:104px;bottom:-34px}.st5-row{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.cmp.p-gasp .c-all,.cmp.p-worried .c-all{animation:none}}