/* حوشي — مساعد ذكي: كُرة سائلة بلون الهوية. كل الألوان متغيّرات، والمشاعر بتغيّرها */
.hm-mascot{--hmm-size:96px;--px:0px;--py:0px;
  --hmm-c1:#5BE3B6;--hmm-c2:var(--green,#0F7B5F);--hmm-c3:var(--green-deep,#0A4D3C);--hmm-glow:#3FE0A8;
  --hmm-l1:#3FE6C8;--hmm-l2:#06705E;--hmm-l3:#CFFFF0;--hmm-spark:var(--saffron,#F2A93B);--hmm-spd:9s;--hmm-tint:transparent;--hmm-tint-o:0;
  position:relative;display:inline-block;width:var(--hmm-size);height:calc(var(--hmm-size) * 1.117);flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;vertical-align:middle}
html.mascot-off .hm-mascot{display:none!important}
html:not(.mascot-off) .hmm-alt{display:none!important}
.hmm-svg{width:100%;height:100%;overflow:visible;display:block}
.hmm-svg *{transform-box:fill-box}
.hmm-shadow{transform-origin:center;animation:hmmShadowFloat 3.6s ease-in-out infinite}
.hmm-all{transform-origin:50% 100%}
.hmm-bodyg{transform-origin:50% 50%;animation:hmmFloatY 3.6s ease-in-out infinite}
.hmm-aura{transform-origin:center;animation:hmmAura 3.6s ease-in-out infinite;transition:opacity .4s}
/* السائل جوه الكُرة بيلف بسرعات مختلفة */
.hmm-swirl{transform-box:view-box;transform-origin:60px 64px}
.hmm-sw1{animation:hmmRot var(--hmm-spd) linear infinite}
.hmm-sw2{animation:hmmRot calc(var(--hmm-spd) * 1.35) linear infinite reverse}
.hmm-sw3{animation:hmmRot calc(var(--hmm-spd) * .8) linear infinite}
.hmm-swirl ellipse{transition:fill .5s}
.hmm-liquid{opacity:.9}
.hmm-tint{fill:var(--hmm-tint);opacity:var(--hmm-tint-o);transition:opacity .45s,fill .45s}
.hmm-sheen{fill:#fff;opacity:.22}
.hmm-rim{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2}
.hmm-rim2{fill:none;stroke:rgba(0,40,28,.35);stroke-width:1}
.hmm-orbit path,.hmm-orbit ellipse{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.4;stroke-linecap:round}
.hmm-ring-back{stroke:rgba(255,255,255,.35)!important}
.hmm-sat{fill:var(--saffron,#F2A93B);stroke:#fff;stroke-width:1.2}
.hmm-orbit{opacity:0;transition:opacity .3s}
/* العينين */
.hmm-look{transform:translate(calc(var(--px) * 1.6),calc(var(--py) * 1.5));transition:transform .18s ease-out}
.hmm-white{fill:#fff}
.hmm-glint{fill:var(--hmm-c1);opacity:.55}
.hmm-eye{transform-origin:center;transition:transform .12s ease-in,opacity .15s}
.is-blink .hmm-eye{transform:scaleY(.1)}
.hmm-eyes{transition:opacity .15s}
.hmm-eyes-happy,.hmm-eyes-closed,.hmm-mouth:not(.hmm-m-grin):not(.hmm-m-o){fill:none;stroke:#fff;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.hmm-mouth:not(.hmm-m-grin):not(.hmm-m-o){stroke-width:2.6}
.hmm-m-grin,.hmm-m-o{fill:#fff}
.hmm-eyes-love{fill:#fff}
.hmm-blush{fill:#FF8FA8;opacity:0;transition:opacity .3s;filter:blur(1.5px)}
.hmm-visor{transform:translateY(-34px);opacity:0;transition:transform .38s cubic-bezier(.34,1.4,.64,1),opacity .25s}
.hmm-visor rect{fill:rgba(255,255,255,.3);stroke:rgba(255,255,255,.75);stroke-width:1.2}
.hmm-visor path{stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-linecap:round}
.hmm-eyes-happy,.hmm-eyes-closed,.hmm-eyes-love,.hmm-mouth,.hmm-z,.hmm-q,.hmm-dots,.hmm-love,.hmm-sparks{opacity:0;transition:opacity .18s}
.hmm-z text,.hmm-q{font:800 15px/1 system-ui,sans-serif;fill:var(--green-deep,#0A4D3C);paint-order:stroke;stroke:#fff;stroke-width:3px}
.hmm-q{font-size:22px}
.hmm-dots circle{fill:var(--green,#0F7B5F);stroke:#fff;stroke-width:1.4}
.hmm-love{fill:#FF5C86}
.hmm-sparks path,.hmm-sparks circle{fill:var(--saffron,#F2A93B)}

/* ===== الحالات ===== */
.m-idle .hmm-m-smile,.m-look .hmm-m-smile,.m-busy .hmm-m-smile,.m-peek .hmm-m-smile{opacity:.9}
.m-happy .hmm-m-grin,.m-celebrate .hmm-m-grin,.m-wave .hmm-m-grin,.m-love .hmm-m-grin{opacity:1}
.m-happy .hmm-eyes,.m-celebrate .hmm-eyes,.m-sleep .hmm-eyes,.m-love .hmm-eyes,.m-shy .hmm-eyes{opacity:0}
.m-happy .hmm-eyes-happy,.m-celebrate .hmm-eyes-happy,.m-wave .hmm-eyes-happy{opacity:1}
.m-wave .hmm-eyes{opacity:0}
.m-love .hmm-eyes-love,.m-love .hmm-love{opacity:1}
.m-love .hmm-love{animation:hmmFloat 1.4s ease-out infinite}
.m-celebrate .hmm-sparks{opacity:1;animation:hmmTwinkle .7s ease-in-out infinite alternate}
.m-happy .hmm-blush,.m-celebrate .hmm-blush,.m-shy .hmm-blush,.m-love .hmm-blush,.m-wave .hmm-blush{opacity:.75}
/* ألوان المشاعر */
.m-happy,.m-celebrate,.m-wave{--hmm-spd:4s;--hmm-l3:#FFF3C4;--hmm-glow:#FFD36B;--hmm-l1:#5CF0B8}
.m-love{--hmm-spd:5s;--hmm-l1:#FF7AA8;--hmm-l3:#FFD1E0;--hmm-glow:#FF8FB5;--hmm-tint:#FF6F9F;--hmm-tint-o:.22}
.m-sad{--hmm-spd:16s;--hmm-spark:#9EC2D6;--hmm-c1:#8FB3C9;--hmm-c2:#4C6F86;--hmm-c3:#2C4558;--hmm-l1:#7C9DB3;--hmm-l2:#9EC2D6;--hmm-l3:#C9DDE8;--hmm-glow:#7FA7C4}
.m-sleep{--hmm-spd:22s;--hmm-tint:#0B1E33;--hmm-tint-o:.38;--hmm-glow:#4B6C9E}
.m-think,.m-busy{--hmm-spd:4.5s;--hmm-l1:#7A8CFF;--hmm-glow:#7FD7FF}
.m-run{--hmm-spd:1.4s;--hmm-glow:#62F0C2}
.m-wow{--hmm-spd:3s}
.m-confused{--hmm-spd:7s;--hmm-l1:#C49BFF}
.m-shy,.m-peek{--hmm-tint:#FF8FA8;--hmm-tint-o:.16}
/* كلمة المرور: بيقفل عينيه وبينزل "حاجز" قدامها */
.m-shy .hmm-visor{transform:none;opacity:1}
.m-shy .hmm-eyes-closed{opacity:1}
.m-peek .hmm-visor{transform:translate(-14px,0) scaleX(.55);opacity:1}
.m-peek .hmm-eye-l{opacity:0}
.m-peek .hmm-eye-r{transform:scale(1.08)}
.m-shy .hmm-bodyg,.m-peek .hmm-bodyg{animation:hmmFloatY 3.6s ease-in-out infinite,hmmShy 2.2s ease-in-out infinite}
/* زعلان: لون بارد، العينين مايلة لتحت، وبينزل شوية */
.m-sad .hmm-m-sad{opacity:1}
.m-sad{--py:2px!important}
.m-sad .hmm-eye-l{transform:rotate(18deg) scaleY(.72)}
.m-sad .hmm-eye-r{transform:rotate(-18deg) scaleY(.72)}
.m-sad .hmm-bodyg{animation:hmmDroop 3s ease-in-out infinite}
.m-sad .hmm-aura{opacity:.5}
/* بيفكر / بيجهّز / بيحمّل: الحلقة بتلف حواليه */
.m-think .hmm-orbit,.m-busy .hmm-orbit,.m-run .hmm-orbit{opacity:1}
.m-think .hmm-m-flat,.m-confused .hmm-m-flat{opacity:1}
.m-think{--px:2.4px!important;--py:-2.4px!important}
.m-think .hmm-dots{opacity:1}
.m-think .hmm-dots circle{animation:hmmDot 1.1s ease-in-out infinite}
.m-think .hmm-dots circle:nth-child(2){animation-delay:.15s}
.m-think .hmm-dots circle:nth-child(3){animation-delay:.3s}
.m-busy .hmm-m-smile{opacity:.9}
.m-run .hmm-m-smile{opacity:.9}
.m-run{--px:-2.4px!important}
.m-run .hmm-all{animation:hmmRun .5s ease-in-out infinite alternate}
/* محتار */
.m-confused .hmm-q{opacity:1;animation:hmmFloat 1.6s ease-in-out infinite}
.m-confused .hmm-eye-l{transform:scale(.78)}
.m-confused .hmm-eye-r{transform:scale(1.12)}
.m-confused .hmm-bodyg{animation:hmmTilt 2.4s ease-in-out infinite}
/* مستغرب */
.m-wow .hmm-m-o{opacity:1}
.m-wow .hmm-eye{transform:scale(1.18)}
.m-wow .hmm-aura{animation:hmmAura 1.2s ease-in-out infinite}
/* نايم */
.m-sleep .hmm-eyes-closed{opacity:1}
.m-sleep .hmm-z{opacity:1}
.m-sleep .hmm-z text{animation:hmmZ 2.4s ease-in-out infinite}
.m-sleep .hmm-z text:nth-child(2){animation-delay:1.2s}
.m-sleep .hmm-bodyg{animation:hmmFloatY 6s ease-in-out infinite}
.m-sleep .hmm-aura{opacity:.45}
.m-happy .hmm-all{animation:hmmBounce .9s ease-in-out infinite}
.m-celebrate .hmm-all{animation:hmmBounce .6s ease-in-out infinite}
.m-wave .hmm-bodyg{animation:hmmWiggle 1s ease-in-out infinite}

/* ===== حركات لمرة واحدة ===== */
.r-nod .hmm-look{animation:hmmNod .2s ease-out}
.r-shake .hmm-all{animation:hmmShake .5s ease-in-out}
.r-hop .hmm-all{animation:hmmHop .55s cubic-bezier(.3,.7,.4,1)}
.r-jump .hmm-all{animation:hmmJump .8s cubic-bezier(.3,.7,.4,1)}
.r-squish .hmm-all{animation:hmmSquish .45s ease-out}
.r-spin .hmm-all{animation:hmmSpin .7s cubic-bezier(.5,0,.3,1)}
.r-hop .hmm-shadow,.r-jump .hmm-shadow{animation:hmmShadowJump .7s ease-out}

@keyframes hmmRot{to{transform:rotate(360deg)}}
@keyframes hmmFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hmmShadowFloat{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.75}}
@keyframes hmmAura{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.04);opacity:1}}
@keyframes hmmShy{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes hmmTilt{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-3deg)}}
@keyframes hmmWiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes hmmDroop{0%,100%{transform:translateY(2px) scale(1.01,.98)}50%{transform:translateY(4px) scale(1.02,.96)}}
@keyframes hmmDot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-3px);opacity:1}}
@keyframes hmmFloat{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes hmmZ{0%{transform:translate(0,4px) scale(.7);opacity:0}30%{opacity:1}100%{transform:translate(6px,-10px) scale(1.1);opacity:0}}
@keyframes hmmRun{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-5px) rotate(4deg)}}
@keyframes hmmBounce{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-7px) scale(.98,1.03)}80%{transform:translateY(0) scale(1.04,.96)}}
@keyframes hmmNod{50%{transform:translate(calc(var(--px) * 1.6),calc(var(--py) * 1.5 + 1.4px))}}
@keyframes hmmShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-4deg)}40%{transform:translateX(5px) rotate(3deg)}60%{transform:translateX(-4px) rotate(-2deg)}80%{transform:translateX(2px)}}
@keyframes hmmHop{0%{transform:scale(1.06,.92)}35%{transform:translateY(-16px) scale(.96,1.06)}70%{transform:translateY(0) scale(1.06,.93)}100%{transform:none}}
@keyframes hmmJump{0%{transform:scale(1.1,.88)}30%{transform:translateY(-30px) scale(.94,1.08) rotate(-6deg)}55%{transform:translateY(-30px) rotate(6deg)}80%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
@keyframes hmmSquish{30%{transform:scale(1.12,.88)}60%{transform:scale(.95,1.06)}100%{transform:none}}
@keyframes hmmSpin{0%{transform:scale(1,1)}20%{transform:scale(1.08,.9)}100%{transform:rotateY(360deg)}}
@keyframes hmmShadowJump{30%{transform:scaleX(.6);opacity:.5}100%{transform:none}}
@keyframes hmmTwinkle{from{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}

/* فقاعة الكلام */
.hmm-say{position:absolute;bottom:calc(100% - 6px);inset-inline-start:50%;transform:translate(50%,6px) scale(.9);transform-origin:50% 100%;
  background:#fff;color:#17251F;font:600 .8rem/1.4 inherit;font-family:inherit;padding:7px 11px;border-radius:14px;white-space:nowrap;box-shadow:0 6px 18px rgba(10,40,30,.18);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1);z-index:5}
.hmm-say::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}
[dir=rtl] .hmm-say{transform:translate(50%,6px) scale(.9)}
.is-saying .hmm-say{opacity:1;transform:translate(50%,0) scale(1)}
/* احتفال */
.hmm-burst{position:absolute;left:50%;top:45%;pointer-events:none}
.hmm-burst i{position:absolute;width:7px;height:7px;border-radius:2px;background:var(--c);animation:hmmBurst 1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes hmmBurst{0%{transform:rotate(var(--a)) translateX(0) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scale(.4);opacity:0}}

/* ===== التحميل: فقاعة صغيرة بدل الشريط ===== */
.hm-net{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:2100;display:flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:999px;background:rgba(255,255,255,.96);color:#17251F;font:600 .82rem/1.2 inherit;font-family:inherit;
  box-shadow:0 10px 30px rgba(10,40,30,.18),0 0 0 1px rgba(10,40,30,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform:translate(-50%,24px) scale(.9);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
body:not(.has-panel-tabs):not(:has(.tab-bar)) .hm-net{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.hm-net.show{transform:translate(-50%,0) scale(1);opacity:1}
.hm-net .hm-mascot{cursor:default;margin-block:-8px -4px}
.hm-net-t{white-space:nowrap}
.hm-net-dots{display:inline-flex;gap:3px}
.hm-net-dots i{width:5px;height:5px;border-radius:50%;background:var(--green,#0F7B5F);animation:hmmDot 1s ease-in-out infinite}
.hm-net-dots i:nth-child(2){animation-delay:.15s}.hm-net-dots i:nth-child(3){animation-delay:.3s}
.hm-net.is-slow{background:#FFF8EC}
html.mascot-off .hm-net{padding-inline-start:14px}

/* ===== الانتقال بين الصفحات ===== */
.hm-veil{position:fixed;inset:0;z-index:3500;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;
  background:rgba(243,246,244,.72);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px)}
html.hm-leaving .hm-veil{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease .22s,visibility 0s .22s}
html.hm-leaving body > *:not(.hm-veil){transition:transform .45s cubic-bezier(.2,.8,.2,1) .05s,filter .45s;transform:scale(.985)}
.hm-veil-card{display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateY(8px);transition:transform .4s cubic-bezier(.34,1.56,.64,1) .25s}
html.hm-leaving .hm-veil-card{transform:none}
.hm-veil-t{font:600 .9rem/1.3 inherit;font-family:inherit;color:#17251F}
html.mascot-off .hm-veil-card::before{content:"";width:34px;height:34px;border-radius:50%;border:3px solid rgba(15,123,95,.2);border-top-color:var(--green,#0F7B5F);animation:hmmSpinner .8s linear infinite}
@keyframes hmmSpinner{to{transform:rotate(360deg)}}

/* 4.16.1: اتشال @view-transition — في WebView التطبيق كان بيأخر التنقل ويطلع خطأ "Transition was aborted"
   والستارة (hm-veil) هي اللي بتغطي الانتقال */

@media (prefers-reduced-motion:reduce){
  .hm-mascot *,.hm-net *,.hm-veil *{animation:none!important;transition:none!important}
  html.hm-leaving body > *{transform:none!important}
}
html.mascot-off .hm-mascot.hmm-force{display:inline-block!important}
/* 4.7: فقاعات بتطلع جوه الكُرة + لمعة بتعدّي + بُق بيتكلم */
.hmm-bub{fill:#fff;opacity:0;transform-box:view-box;animation:hmmBub 4.8s ease-in infinite}
.hmm-bub:nth-child(2){animation-delay:1.3s;animation-duration:5.6s}
.hmm-bub:nth-child(3){animation-delay:2.4s;animation-duration:4.2s}
.hmm-bub:nth-child(4){animation-delay:3.4s;animation-duration:6s}
@keyframes hmmBub{0%{transform:translateY(0);opacity:0}15%{opacity:.55}80%{opacity:.35}100%{transform:translateY(-70px);opacity:0}}
.m-run .hmm-bub,.m-happy .hmm-bub,.m-celebrate .hmm-bub{animation-duration:1.8s}
.m-sleep .hmm-bub,.m-sad .hmm-bub{animation-duration:9s}
.hmm-shimmer{fill:#fff;opacity:.16;transform-box:view-box;transform-origin:18px 65px;animation:hmmShim 7s ease-in-out infinite}
@keyframes hmmShim{0%,70%{transform:translateX(-30px) rotate(24deg);opacity:0}75%{opacity:.18}100%{transform:translateX(120px) rotate(24deg);opacity:0}}
.hmm-m-talk{fill:#fff;opacity:0;transform-origin:center}
.is-saying .hmm-mouth{opacity:0!important}
.is-saying .hmm-m-talk{opacity:1;animation:hmmTalk .16s ease-in-out 10 alternate forwards}
@keyframes hmmTalk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.is-saying:not(.m-happy):not(.m-celebrate):not(.m-wave):not(.m-love) .hmm-eye{transform:scaleY(1.06)}

/* ===== 4.10: ودان + إيدين (شكل رفيق الألعاب — تصميم خاص بينا) ===== */
.hmm-ear{transform-origin:50% 100%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.hmm-ear-l{transform-origin:70% 100%;animation:hmmEarL 4.2s ease-in-out infinite}
.hmm-ear-r{transform-origin:30% 100%;animation:hmmEarR 4.2s ease-in-out infinite .3s}
.hmm-ear-in{fill:rgba(255,255,255,.28)}
.hmm-ear ellipse{transform-box:view-box;transform-origin:0 0}
@keyframes hmmEarL{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-14deg)}94%{transform:rotate(4deg)}}
@keyframes hmmEarR{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(14deg)}94%{transform:rotate(-4deg)}}
.hmm-hand{transform-origin:center;transition:transform .42s cubic-bezier(.34,1.45,.64,1);transform:translate(calc(var(--px) * 1.4),calc(var(--py) * 1.2))}
.hmm-hand-in{transform-origin:center;animation:hmmHandFloat 3.6s ease-in-out infinite}
.hmm-hand-r .hmm-hand-in{animation-delay:-1.8s}
.hmm-hand rect,.hmm-thumb{stroke:#fff;stroke-width:1.5;paint-order:stroke}
.hmm-hand-in{filter:drop-shadow(0 0 2.2px var(--hmm-glow)) drop-shadow(0 1px 1px rgba(0,40,28,.25))}
.hmm-thumb{transform-box:view-box;transform-origin:0 0}
.hmm-finger{fill:none;stroke:rgba(0,70,50,.4);stroke-width:1.3;stroke-linecap:round}
.hmm-hand-sheen{fill:#fff;opacity:.75}
@keyframes hmmHandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* الحاجز القديم اتشال: الإيدين هي اللي بتغطي */
.hmm-visor{display:none}
/* كلمة المرور: الإيدين على العينين */
.m-shy .hmm-hand-l{transform:translate(35px,-21px) scale(1.55)}
.m-shy .hmm-hand-r{transform:translate(-35px,-21px) scale(1.55)}
.m-shy .hmm-hand-in,.m-peek .hmm-hand-in{animation:none}
.m-peek .hmm-hand-l{transform:translate(35px,-21px) scale(1.55)}
.m-peek .hmm-hand-r{transform:translate(-30px,-4px) scale(1.35) rotate(-10deg)}
.m-shy .hmm-ear-l,.m-peek .hmm-ear-l{transform:rotate(-18deg)}
.m-shy .hmm-ear-r,.m-peek .hmm-ear-r{transform:rotate(18deg)}
/* بيلوّح */
.m-wave .hmm-hand-r{transform:translate(-6px,-46px)}
.m-wave .hmm-hand-r .hmm-hand-in{transform-origin:50% 140%;animation:hmmWaveHand .5s ease-in-out infinite alternate}
@keyframes hmmWaveHand{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
/* فرحان: الإيدين فوق — وبيحتفل: بيسقّف */
.m-happy .hmm-hand-l{transform:translate(6px,-34px)}
.m-happy .hmm-hand-r{transform:translate(-6px,-34px)}
.m-celebrate .hmm-hand-l{animation:hmmClapL .32s ease-in-out infinite alternate}
.m-celebrate .hmm-hand-r{animation:hmmClapR .32s ease-in-out infinite alternate}
@keyframes hmmClapL{from{transform:translate(14px,-48px)}to{transform:translate(38px,-56px)}}
@keyframes hmmClapR{from{transform:translate(-14px,-48px)}to{transform:translate(-38px,-56px)}}
.m-happy .hmm-ear-l,.m-celebrate .hmm-ear-l{animation:hmmEarJoyL .5s ease-in-out infinite alternate}
.m-happy .hmm-ear-r,.m-celebrate .hmm-ear-r{animation:hmmEarJoyR .5s ease-in-out infinite alternate}
@keyframes hmmEarJoyL{from{transform:rotate(-10deg)}to{transform:rotate(6deg)}}
@keyframes hmmEarJoyR{from{transform:rotate(10deg)}to{transform:rotate(-6deg)}}
/* بيحب: الإيدين على خدوده */
.m-love .hmm-hand-l{transform:translate(22px,-4px) scale(1.1)}
.m-love .hmm-hand-r{transform:translate(-22px,-4px) scale(1.1)}
/* بيفكر: إيده على دقنه */
.m-think .hmm-hand-r{transform:translate(-40px,6px) scale(.95)}
.m-think .hmm-hand-r .hmm-hand-in{animation:hmmTap 1.2s ease-in-out infinite}
@keyframes hmmTap{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* محتار: بيهرش في راسه */
.m-confused .hmm-hand-r{transform:translate(-26px,-58px) scale(.9)}
.m-confused .hmm-hand-r .hmm-hand-in{animation:hmmScratch .35s ease-in-out infinite alternate}
@keyframes hmmScratch{from{transform:translate(-2px,0)}to{transform:translate(2px,-2px)}}
/* مستغرب: الإيدين جنب وشه والودان واقفة */
.m-wow .hmm-hand-l{transform:translate(10px,-28px)}
.m-wow .hmm-hand-r{transform:translate(-10px,-28px)}
.m-wow .hmm-ear{transform:scaleY(1.18)}
/* زعلان ونايم: الإيدين تحت والودان نازلة */
.m-sad .hmm-hand-l{transform:translate(4px,12px)}
.m-sad .hmm-hand-r{transform:translate(-4px,12px)}
.m-sad .hmm-ear-l,.m-sleep .hmm-ear-l{animation:none;transform:rotate(-34deg)}
.m-sad .hmm-ear-r,.m-sleep .hmm-ear-r{animation:none;transform:rotate(34deg)}
.m-sleep .hmm-hand-l{transform:translate(12px,14px)}
.m-sleep .hmm-hand-r{transform:translate(-12px,14px)}
.m-sleep .hmm-hand-in{animation-duration:6s}
/* بيجري / بيحمّل: الإيدين بتتمرجح */
.m-run .hmm-hand-l .hmm-hand-in{animation:hmmSwing .5s ease-in-out infinite alternate}
.m-run .hmm-hand-r .hmm-hand-in{animation:hmmSwing .5s ease-in-out infinite alternate-reverse}
@keyframes hmmSwing{from{transform:translate(-4px,-6px)}to{transform:translate(4px,6px)}}
.m-run .hmm-ear-l{transform:rotate(-26deg)}
.m-run .hmm-ear-r{transform:rotate(-8deg)}
/* بيجهّز: بيكتب على كيبورد وهمي */
.m-busy .hmm-hand-l{transform:translate(20px,8px)}
.m-busy .hmm-hand-r{transform:translate(-20px,8px)}
.m-busy .hmm-hand-l .hmm-hand-in{animation:hmmType .22s ease-in-out infinite alternate}
.m-busy .hmm-hand-r .hmm-hand-in{animation:hmmType .22s ease-in-out infinite alternate-reverse}
@keyframes hmmType{from{transform:translateY(0)}to{transform:translateY(-4px)}}
/* بيبص على اللي بتكتبه: الإيدين بتشاور ناحيته */
.m-look .hmm-hand-l{transform:translate(calc(var(--px) * 3),calc(var(--py) * 2 - 4px))}
.m-look .hmm-hand-r{transform:translate(calc(var(--px) * 3),calc(var(--py) * 2 - 4px))}
/* الحجم الصغير جدًا (فقاعة التحميل): الإيدين والودان أبسط */
.hm-net .hmm-hand,.hm-net .hmm-ears{display:none}
@media (prefers-reduced-motion:reduce){.hmm-ear,.hmm-hand,.hmm-hand-in{animation:none!important}}

/* ===== 4.11: عمق أكتر من غير 3D تقيل ===== */
/* ظل تلامس ناعم بيصغر لما يطلع لفوق ويكبر لما ينزل (كأنه طاير فعلًا) */
@keyframes hmmShadowFloat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
.r-hop .hmm-shadow,.r-jump .hmm-shadow{animation:hmmShadowJump .7s ease-out}
@keyframes hmmShadowJump{30%{transform:scale(.55);opacity:.4}100%{transform:none}}
/* لمعة حادة + إضاءة على الحافة (Fresnel) */
.hmm-fresnel{pointer-events:none}
.hmm-spec{fill:#fff;opacity:.92;transform-box:view-box;transform-origin:0 0}
.hmm-spec2{fill:#fff;opacity:.55}
.hmm-rim{stroke:rgba(255,255,255,.35)!important}
/* الهالة شفافة من الأطراف وبتتنفس */
.hmm-aura{mix-blend-mode:normal}
/* الحواجب: بتقول حالته */
.hmm-brow{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.8;transform-origin:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.m-happy .hmm-brow,.m-celebrate .hmm-brow,.m-wave .hmm-brow,.m-love .hmm-brow{transform:translateY(-2.5px)}
.m-wow .hmm-brow{transform:translateY(-5px) scale(1.08)}
.m-sad .hmm-brow-l{transform:translateY(1px) rotate(-16deg)}
.m-sad .hmm-brow-r{transform:translateY(1px) rotate(16deg)}
.m-think .hmm-brow-l{transform:translateY(1.5px) rotate(8deg)}
.m-think .hmm-brow-r{transform:translateY(-3px) rotate(-6deg)}
.m-confused .hmm-brow-l{transform:translateY(-3px) rotate(-10deg)}
.m-confused .hmm-brow-r{transform:translateY(1.5px) rotate(12deg)}
.m-busy .hmm-brow,.m-run .hmm-brow{transform:translateY(1px) rotate(0)}
.m-busy .hmm-brow-l,.m-run .hmm-brow-l{transform:translateY(1.5px) rotate(10deg)}
.m-busy .hmm-brow-r,.m-run .hmm-brow-r{transform:translateY(1.5px) rotate(-10deg)}
.m-sleep .hmm-brow{transform:translateY(3px);opacity:.55}
.m-shy .hmm-brow,.m-peek .hmm-brow{transform:translateY(-3px) rotate(0)}
/* العينين بتنبض نور خفيف */
.hmm-white{animation:hmmEyeGlow 3.2s ease-in-out infinite}
@keyframes hmmEyeGlow{0%,100%{opacity:1}50%{opacity:.86}}
/* الإيدين: ثنية خفيفة حسب الحالة + نور بيربطها بالجسم */
.m-happy .hmm-hand-l .hmm-hand-in{animation:none;transform:rotate(-14deg)}
.m-happy .hmm-hand-r .hmm-hand-in{animation:none;transform:rotate(14deg)}
.m-sad .hmm-hand-l .hmm-hand-in{animation:none;transform:rotate(18deg)}
.m-sad .hmm-hand-r .hmm-hand-in{animation:none;transform:rotate(-18deg)}
.m-wow .hmm-hand-l .hmm-hand-in{animation:none;transform:rotate(-20deg)}
.m-wow .hmm-hand-r .hmm-hand-in{animation:none;transform:rotate(20deg)}
@media (prefers-reduced-motion:reduce){.hmm-white{animation:none}}

/* ===== 4.14: حوشي بصور التصميم الحقيقي ===== */
.hm-mascot.is-pics .hmm-svg{display:none}
.hmm-pics{position:absolute;inset:0;display:block;pointer-events:none}
.hmm-pics-in{position:absolute;inset:0;display:block;transform-origin:50% 78%;animation:hmmPicFloat 3.6s ease-in-out infinite;
  translate:calc(var(--px) * 1.2) calc(var(--py) * .8);rotate:calc(var(--px) * 1.4deg);transition:translate .25s ease-out,rotate .3s ease-out}
.hmm-pics img{position:absolute;left:-9%;top:-11%;width:118%;height:118%;object-fit:contain;opacity:0;transform:scale(.94);
  transition:opacity .22s ease,transform .35s cubic-bezier(.34,1.56,.64,1);-webkit-user-drag:none;user-select:none}
.hmm-pics img.on{opacity:1;transform:none}
/* ظل تلامس ناعم بيصغر لما يطلع */
.hmm-shadow2{position:absolute;left:28%;right:28%;bottom:7%;height:7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(6,30,28,.38),rgba(6,30,28,0));animation:hmmPicShadow 3.6s ease-in-out infinite}
@keyframes hmmPicFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
@keyframes hmmPicShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.65}}
/* حالات: فرحان بينط، بيجري بيتهز، زعلان ونايم أبطأ */
.is-pics.m-happy .hmm-pics-in,.is-pics.m-celebrate .hmm-pics-in,.is-pics.m-love .hmm-pics-in{animation:hmmPicBounce .7s ease-in-out infinite}
.is-pics.m-run .hmm-pics-in{animation:hmmPicRun .45s ease-in-out infinite alternate}
.is-pics.m-busy .hmm-pics-in{animation:hmmPicBusy 1.1s ease-in-out infinite}
.is-pics.m-sleep .hmm-pics-in,.is-pics.m-sad .hmm-pics-in{animation-duration:6s}
.is-pics.m-confused .hmm-pics-in{animation:hmmPicTilt 2.4s ease-in-out infinite}
.is-pics.m-wave .hmm-pics-in{animation:hmmPicWave 1.2s ease-in-out infinite}
@keyframes hmmPicBounce{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-7%) scale(.98,1.03)}80%{transform:translateY(0) scale(1.03,.97)}}
@keyframes hmmPicRun{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-5%) rotate(4deg)}}
@keyframes hmmPicBusy{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2%)}}
@keyframes hmmPicTilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg)}}
@keyframes hmmPicWave{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2%)}}
/* حركات لمرة واحدة */
.is-pics.r-hop .hmm-pics-in{animation:hmmPicHop .55s cubic-bezier(.3,.7,.4,1)}
.is-pics.r-jump .hmm-pics-in{animation:hmmPicJump .8s cubic-bezier(.3,.7,.4,1)}
.is-pics.r-shake .hmm-pics-in{animation:hmmPicShake .5s ease-in-out}
.is-pics.r-squish .hmm-pics-in{animation:hmmPicSquish .45s ease-out}
.is-pics.r-spin .hmm-pics-in{animation:hmmPicSpin .7s cubic-bezier(.5,0,.3,1)}
.is-pics.r-nod .hmm-pics-in{animation:hmmPicNod .25s ease-out}
.is-pics.r-hop .hmm-shadow2,.is-pics.r-jump .hmm-shadow2{animation:hmmPicShadowJump .7s ease-out}
@keyframes hmmPicHop{0%{transform:scale(1.06,.92)}35%{transform:translateY(-14%) scale(.96,1.06)}70%{transform:translateY(0) scale(1.05,.94)}100%{transform:none}}
@keyframes hmmPicJump{0%{transform:scale(1.1,.88)}30%{transform:translateY(-24%) scale(.94,1.08) rotate(-6deg)}55%{transform:translateY(-24%) rotate(6deg)}80%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
@keyframes hmmPicShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6%) rotate(-4deg)}40%{transform:translateX(5%) rotate(3deg)}60%{transform:translateX(-4%) rotate(-2deg)}80%{transform:translateX(2%)}}
@keyframes hmmPicSquish{30%{transform:scale(1.1,.9)}60%{transform:scale(.96,1.05)}100%{transform:none}}
@keyframes hmmPicSpin{0%{transform:scale(1)}20%{transform:scale(1.06,.92)}100%{transform:rotateY(360deg)}}
@keyframes hmmPicNod{50%{transform:translateY(3%) rotate(2deg)}}
@keyframes hmmPicShadowJump{30%{transform:scale(.55);opacity:.4}100%{transform:none}}
/* اللودر الصغير: من غير ظل */
.hm-net .hmm-shadow2{display:none}
@media (prefers-reduced-motion:reduce){.hmm-pics-in,.hmm-shadow2{animation:none!important}.hmm-pics img{transition:opacity .15s}}
/* على الخلفيات الغامقة (الدخول): هالة فاتحة ورا حوشي علشان يبان */
.lg-mascot .hmm-pics-in,.hm-veil .hmm-pics-in{filter:drop-shadow(0 0 16px rgba(170,255,235,.35))}