/* ===== সাইট-জুড়ে ফ্লোটিং উইন্ডো (পাখা + কাচের কার্ড) =====
   মার্কআপ আসে includes/floating_window.php থেকে, লজিক assets/js/floating-window.js এ।
   সব ক্লাসের নাম fw- দিয়ে শুরু, তাই অন্য পেজের CSS এর সাথে মিলে যাবে না। */
.fw, .fw *, .fw-orb, .fw-orb * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.fw {
  --w: min(48vw, 210px);
  position: fixed; left: 50%; top: 22vh; width: var(--w); z-index: 1000;
  transform: translate(-50%, 0);
  transition: opacity .25s, transform .25s, visibility 0s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff; text-align: left; line-height: normal; letter-spacing: normal;
}
.fw.fw-boot { opacity: 0; }                    /* JS অবস্থা বসানোর আগে ঝলক এড়াতে */
.fw.fw-hide {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 12px) scale(.92);
  transition: opacity .25s, transform .25s, visibility 0s .25s;
}

/* কাচের কার্ড */
.fw-glass {
  position: relative; border-radius: 22px; padding: 40px 12px 12px; overflow: hidden;
  background: linear-gradient(160deg, rgba(120,70,220,.34) 0%, rgba(40,16,90,.52) 55%, rgba(20,8,50,.62) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(214,190,255,.55);
  box-shadow: 0 0 0 1px rgba(120,70,220,.35), 0 0 26px rgba(150,90,255,.55), 0 18px 40px rgba(20,8,50,.45),
              inset 0 1px 0 rgba(255,255,255,.45), inset 0 -20px 40px rgba(150,90,255,.12);
}
.fw-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.10) 100%);
}
.fw-glass::after {
  content: ""; position: absolute; left: -40%; top: -60%; width: 60%; height: 220%; transform: rotate(20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: fw-shine 5s ease-in-out infinite;
}
@keyframes fw-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* ড্র্যাগ বার (উপরের অংশ) + বন্ধ বাটন — শুধু এই বারে টাচ করলে পেজ স্ক্রল থামে, বাকি অংশে স্ক্রল চলে */
.fw-bar { position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 4; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.fw-bar:active { cursor: grabbing; }
.fw-x {
  position: absolute; right: 9px; top: 9px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); cursor: pointer;
}
.fw-x svg { width: 9px; height: 9px; }

.fw-body { position: relative; z-index: 2; text-align: center; padding: 2px 2px 0; }
.fw-body h4 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .4px; text-shadow: 0 0 10px rgba(190,150,255,.8); color: #fff; }
.fw-body p { margin: 5px 0 0; font-size: 11px; line-height: 1.45; color: #d7c9f5; }
.fw-btn {
  position: relative; z-index: 2; margin-top: 12px; height: 34px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #9b5cff 0%, #6a2fe0 100%); border: 1px solid rgba(225,205,255,.7);
  box-shadow: 0 0 16px rgba(140,80,255,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
.fw-btn:active { transform: scale(.98); }

/* মাথার ছোট ভিডিও (স্বচ্ছ ব্যাকগ্রাউন্ড) */
.fw-mini { position: absolute; left: 50%; top: -50px; width: 84px; height: 84px; transform: translateX(-50%); z-index: 5; pointer-events: none; }
.fw-mini video { width: 100%; height: 100%; object-fit: contain; background: transparent; display: none; }
.fw-mini.has video { display: block; }
.fw-mini.has .fw-crest { display: none; }
.fw-crest { width: 100%; height: 100%; padding: 18px; filter: drop-shadow(0 0 10px rgba(255,170,90,.95)); }

/* পাখা: নড়ে .fw-wing (শুধু transform), আলো/গ্লো থাকে ভিতরের svg তে — তাই ফোনে হালকা চলে */
.fw-wing {
  position: absolute; top: -4px; width: calc(var(--w) * .7); aspect-ratio: 260/240; pointer-events: none; z-index: 0;
  will-change: transform; animation: fw-flap 3.4s ease-in-out infinite;
}
.fw-wing.l { right: calc(100% - 30px); transform-origin: 92% 72%; }
.fw-wing.r { left: calc(100% - 30px); transform-origin: 8% 72%; animation-name: fw-flapR; }
.fw-wing svg { width: 100%; height: 100%; overflow: visible; display: block;
  filter: drop-shadow(0 0 7px rgba(175,120,255,.95)) drop-shadow(0 0 18px rgba(120,70,230,.55)); }
.fw-wing.r svg { transform: scaleX(-1); }
@keyframes fw-flap  { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes fw-flapR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }

/* ছোট অর্ব: উইন্ডো বন্ধ করলে এটা দিয়ে আবার খোলা যায় (সাপোর্ট বাটনের ঠিক ওপরে) */
.fw-orb {
  position: fixed; right: calc(50% - 215px + 14px); bottom: 172px; width: 56px; height: 56px; border-radius: 50%; z-index: 999; overflow: hidden;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #c9a6ff, #6a2fe0 60%, #2a0f5c);
  border: 2px solid rgba(225,205,255,.9); box-shadow: 0 0 18px rgba(150,90,255,.9);
}
@media (max-width: 430px) { .fw-orb { right: 14px; } }
.fw-orb.show { display: flex; }
.fw-orb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; pointer-events: none; -webkit-user-drag: none; }

@media (prefers-reduced-motion: reduce) {
  .fw-wing, .fw-glass::after { animation: none; }
}

/* ===== লাইভ WinGo রেজাল্ট প্যানেল (assets/js/fw-live.js) ===== */
.fw-live { position: relative; z-index: 2; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(214,190,255,.28); }
.fw-live[hidden], .fw-live [hidden] { display: none !important; }
.fw-lv-tabs { display: flex; gap: 4px; justify-content: center; }
.fw-lv-tabs button {
  flex: 1; height: 22px; border-radius: 8px; border: 1px solid rgba(214,190,255,.35); background: rgba(255,255,255,.08);
  color: #d7c9f5; font: 700 10px/1 inherit; font-family: inherit; cursor: pointer; padding: 0;
}
.fw-lv-tabs button.on { background: linear-gradient(180deg, #9b5cff, #6a2fe0); color: #fff; border-color: rgba(225,205,255,.7); }
.fw-lv-main { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.fw-lv-ball {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 0 10px rgba(190,150,255,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.fw-lv-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fw-lv-res { font-size: 13px; color: #fff; }
.fw-lv-iss { font-size: 10px; color: #c9b8ef; }
.fw-lv-ahead { font-size: 10px; color: #ffd98a; font-weight: 700; }
.fw-lv-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.fw-lv-dots i {
  width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.fw-lv-calc { margin-top: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.1); font-size: 11px; line-height: 1.4; color: #fff; }
.fw-lv-note { margin-top: 6px; font-size: 10px; color: #c9b8ef; text-align: center; }

/* ===== লক স্ক্রিন ===== */
.fw-lk { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fw-lk-ico { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border: 1px solid rgba(214,190,255,.4); }
.fw-lk-ico svg { width: 22px; height: 22px; }
.fw-lk-t { font-size: 13px; color: #fff; margin-top: 2px; }
.fw-lk-s { font-size: 10.5px; color: #d7c9f5; }
.fw-lk-b {
  margin-top: 6px; height: 28px; padding: 0 16px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #ffb84a, #f08a1c); border: 1px solid rgba(255,230,180,.8);
}
.fw-lk-step { margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.1); text-align: left; font-size: 11px; line-height: 1.45; color: #fff; }
.fw-lk-step b { display: block; font-size: 11.5px; }
.fw-lk-note { margin: 4px 0 0; color: #e6dcff; }
.fw-lk-reg { display: block; margin-top: 8px; height: 28px; line-height: 28px; text-align: center; border-radius: 9px; text-decoration: none; color: #fff; font-size: 11.5px; font-weight: 700;
  background: linear-gradient(180deg, #9b5cff, #6a2fe0); border: 1px solid rgba(225,205,255,.7); }
.fw-lk [hidden] { display: none !important; }