/* SkyPlayns · Mis_Marschmelow · 3.0 — nur Startseite */
.mis-bubble-btn,
.mis-bubble-popup,
.mis-bubble-popup * { box-sizing: border-box; }
.mis-bubble-btn[hidden], .mis-bubble-popup[hidden] { display: none !important; }
.mis-bubble-btn {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 64px;
  height: 64px;
  border: 2px solid rgba(173, 217, 255, .86);
  border-radius: 21px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 2147480000;
  background: linear-gradient(135deg, #0867c8 0%, #1940b8 55%, #7236cd 100%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35), 0 0 20px rgba(58, 149, 255, .35);
  animation: misFloat 3.5s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mis-bubble-btn::after {
  content: '♥';
  display: grid;
  place-items: center;
  position: absolute;
  width: 22px;
  height: 22px;
  top: -8px;
  right: -9px;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  background: #fb4e9e;
}
.mis-bubble-btn:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 25px rgba(255, 105, 180, .35); }
.mis-bubble-btn:focus-visible, .mis-bubble-close:focus-visible { outline: 3px solid #ffe28a; outline-offset: 3px; }
.mis-bubble-popup {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 77px);
  max-width: 520px;
  width: calc(100vw - 40px);
  max-height: calc(100dvh - 115px);
  overflow: auto;
  background: linear-gradient(145deg, rgba(12,26,65,.94), rgba(43,24,88,.94));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(118, 190, 255, .7);
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 16px 45px rgba(0,0,0,.45), 0 0 24px rgba(47,128,255,.2);
  z-index: 2147480001;
  display: none;
  transform-origin: bottom right;
}
.mis-bubble-popup.active { display: block; animation: misPopupFade .32s cubic-bezier(.2,1.2,.35,1) both; }
.mis-bubble-popup img { display: block; width: 100%; height: auto; max-height: min(66dvh, 490px); object-fit: contain; border-radius: 12px; }
.mis-bubble-close {
  position: sticky;
  float: right;
  top: 0;
  right: 0;
  margin-bottom: -37px;
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #ed368c;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 5px 12px rgba(0,0,0,.3);
}
@keyframes misFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes misPopupFade { from { opacity: 0; transform: translateY(13px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 480px) {
  .mis-bubble-btn { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 18px; font-size: 27px; }
  .mis-bubble-popup { right: 12px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 69px); width: calc(100vw - 24px); padding: 8px; }
  .mis-bubble-popup img { max-height: 57dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .mis-bubble-btn, .mis-bubble-popup.active { animation: none !important; transition: none !important; }
}