/* ============================================================
   effects.css — ลูกเล่นกลาง (พื้นหลังเคลื่อนไหว + ดาว + หุ่นยนต์)
   ใช้ร่วมกับ theme.css ในหน้า Login และ manage
   ============================================================ */

/* พื้นหลังไล่สีเคลื่อนไหว (theme.css กำหนดสี ส่วนนี้กำหนดการเคลื่อนไหว) */
body{ background-size:400% 400% !important; animation:bgShift 18s ease infinite; }
@keyframes bgShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%}
                    100%{background-position:0% 50%} }

/* canvas ดาวลอย อยู่หลังสุด */
#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ---------- หุ่นยนต์มาสคอต ---------- */
#botWrap{ position:fixed; right:26px; bottom:24px; z-index:50; width:120px; height:140px;
          cursor:pointer; user-select:none; -webkit-user-select:none;
          animation:botFloat 4s ease-in-out infinite; }
#botWrap:hover{ animation-play-state:paused; }
@keyframes botFloat{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); }
                     50%{ transform:translateY(-14px) rotate(1.5deg); } }
#botWrap svg{ width:100%; height:100%; overflow:visible;
              filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); }

#botWrap .shadow{ transform-origin:center; animation:shadowPulse 4s ease-in-out infinite; }
@keyframes shadowPulse{ 0%,100%{ transform:scaleX(1); opacity:.35; }
                        50%{ transform:scaleX(.7); opacity:.18; } }

.eye{ transform-origin:center; animation:blink 4.5s infinite; }
@keyframes blink{ 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.1); } }

#armR{ transform-origin:78px 92px; animation:wave 3s ease-in-out infinite; }
@keyframes wave{ 0%,60%,100%{ transform:rotate(0deg); }
                 70%{ transform:rotate(-22deg); } 80%{ transform:rotate(8deg); }
                 90%{ transform:rotate(-16deg); } }

.antLight{ animation:antGlow 1.6s ease-in-out infinite; }
@keyframes antGlow{ 0%,100%{ opacity:.4; r:4px; } 50%{ opacity:1; r:5.5px; } }

/* กล่องคำพูด */
#botBubble{ position:fixed; right:150px; bottom:96px; z-index:51; max-width:230px;
            padding:12px 15px; font-size:13.5px; line-height:1.45; color:#fff;
            background:rgba(30,33,60,.62); backdrop-filter:blur(18px) saturate(160%);
            -webkit-backdrop-filter:blur(18px) saturate(160%);
            border:1px solid rgba(255,255,255,.2); border-radius:16px 16px 4px 16px;
            box-shadow:0 12px 34px rgba(0,0,0,.45);
            opacity:0; transform:translateY(8px) scale(.92); pointer-events:none;
            transition:.28s cubic-bezier(.2,.9,.3,1.2); }
#botBubble.show{ opacity:1; transform:translateY(0) scale(1); }
#botBubble::after{ content:''; position:absolute; right:-7px; bottom:10px; width:14px; height:14px;
                   background:inherit; border-right:1px solid rgba(255,255,255,.2);
                   border-bottom:1px solid rgba(255,255,255,.2);
                   transform:rotate(-45deg); border-radius:0 0 3px 0; }

@media (max-width:560px){ #botWrap{ width:90px; height:106px; right:14px; bottom:14px; }
                          #botBubble{ right:108px; bottom:70px; max-width:180px; } }