body {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #ffffff;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.loading-background {
    position: absolute;
    z-index: 1;
    width: 60vh;
    height: 100vh;
    background-color: #13bbaf;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-background.overlay {
  background-color: transparent;
  pointer-events: none; /* 讓它不會接收滑鼠點擊事件 */
  z-index: 3;
  align-items: flex-end;
} 

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #13bbaf;
    border-radius: 50%;
    animation: rotate 1.5s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: calc(6*30px);
  height: 50px;
  display: flex;
  /* color: #8d7958; */
  /* color: #8f8f8f; */
  color: #efefef;
  filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
  clip-path: inset(0 100% 0 0);
  animation: l11 2s infinite steps(7);
  margin-bottom: 5vh;
}
.loader:before {
  content: "";
  width: 30px;
  height: 25px;
  background: currentColor;
  clip-path: polygon(0 50%,30% 40%,100% 0,60% 40%,100% 50%,60% 60%,100% 100%,30% 60%);
}
@keyframes l11 {
  100% {clip-path: inset(0 -30px 0 0)}
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.logo-container {
    width: 36px; /* 調整為您的 logo 寬度 */
    height: 36px; /* 調整為您的 logo 高度 */
    position: absolute;
  }

.logo-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0; 
    border-radius: 50%;
    animation: logo-morph 1.5s infinite alternate ease-in-out;
    /* animation: circle-to-logo 2s infinite alternate ease-in-out; */
    
    background-image: url(./images/logo_mini.png);
    background-repeat: no-repeat;
    background-position: center;
}

@keyframes logo-morph {
    0% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(360deg);
      opacity: 0.8;
    }
}

@keyframes circle-to-logo {
    0% {
      clip-path: circle(50% at 50% 50%);
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    50% {
      /* 在這裡設定變形到一半的狀態 */
      clip-path: polygon( /* 您的 logo 中間變形形狀的 clip-path 座標 */
        50% 0%,
        75% 25%,
        100% 50%,
        75% 75%,
        50% 100%,
        25% 75%,
        0% 50%,
        25% 25%
      );
      transform: scale(1.1) rotate(180deg);
      opacity: 0.9;
    }
    100% {
      /* 在這裡設定您的最終 logo 形狀的 clip-path */
      clip-path: polygon( /* 您的 logo 形狀的 clip-path 座標 */
        20% 20%,
        80% 20%,
        80% 80%,
        20% 80%
      );
      transform: scale(1) rotate(360deg);
      opacity: 1;
    }
  }

/* .visibleIframe {
    position: absolute;
    z-index: 3;

    width: -webkit-fill-available;
    height: 100vh;
    border: 0;
} */
/* .hiddenIframe {
    position: absolute;
    z-index: 2;

    width: -webkit-fill-available;
    height: 100vh;
    border: 0;
} */
iframe {
    position: absolute;
    z-index: 2;

    /* width: -webkit-fill-available;
    width: -moz-available; */
    width: 100%;
    box-sizing: border-box;
    height: 100vh;
    border: 0;
}

.hidden {
    display: none;
}

#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5; /* 確保在其他元素之上 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.toast {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    border-radius: 5px;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadein 0.3s ease-in-out forwards, fadeout 0.3s ease-in-out 3s forwards;
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeout {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}
  
@supports (height: 100dvh) {
    .loading-background {
        width: 60dvh;
        height: 100dvh;
    }

    iframe {
        /* width: -webkit-fill-available; */
        height: 100dvh;
        /* border: 0; */
    }
}