/* 覆蓋預設隱藏，允許 JS 控制 */
.rune-wrapper {


    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .rune-wrapper.show {
    display: block;

  }

  
  .rune-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 24, 42, 0.9);
    z-index: 4;
    display: none;
    
  }
  
  .rune-backdrop.show {
    display: block;
  }
  
  #show-rune-btn {
    display: none;
    position: fixed;
    bottom: 120px;
    right: 50%;

    z-index: 3;
    padding: 10px 20px;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.85) url('../showrune.webp') no-repeat center center;
    background-size: contain;
    width: 50px; /* 根據圖片調整 */
    height: 50px;  /* 根據圖片調整 */
    color: #fff;
    border: 1px solid #555;
    border-radius: 25%;
    cursor: pointer;
  }
  
  #hide-rune-btn {
    
    position: absolute;

bottom: 50px;

    background: #000000de;
    color: #fff;
    padding: 4px 12px;

    cursor: pointer;
    z-index: 10;
  }
  @media (min-width: 1101px) {
    #hide-rune-btn{
      display: none;
    }
    }

  @media (max-width: 1100px) {

        .rune-wrapper.show {
        scale: 1.5;
        left: 20vw;
        }
        #show-rune-btn {
          scale: 2.5;
            right:  100px;
            bottom: 120px;
        }
        #hide-rune-btn {
            left: 22vw;
  
        }
        
  }
  @media (max-width: 450px) {
    .rune-wrapper.show {
        scale: 1;
        left:0;
        bottom: 10vh;
        }
        #show-rune-btn {
          scale: 1;
            right:  100px;
            bottom: 20px;
        }
        #hide-rune-btn {
            left: 45vw;
  
        }
  }


  /* ------------------ */

  .textbg-container {
    opacity: 1;
 
    /* transition: opacity 0.6s ease; */

  }
  
  .textbg-container.show {
 
    opacity: 1;
  
  }
  
  .textbg-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 3;
    display: none;
    opacity: 0;
    /* transition: opacity 0.6s ease; */
  }
  
  .textbg-backdrop.show {
    display: block;
    opacity: 1;
  }
  
  /* 顯示按鈕 */
  #show-textbg-btn {
    position: fixed;
    bottom: 120px;
    right: 20px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.85) url('../Intro.webp') no-repeat center center;
    background-size: contain;
    width: 50px; /* 根據圖片調整 */
    height: 50px;  /* 根據圖片調整 */
    border: 1px solid #555;
    border-radius: 25%;
    color: #fff;
    z-index: 3;
    display: none;
  }
  
  /* 關閉按鈕 */
  #hide-textbg-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background: none;
    border: 1px solid #fff;
    padding: 6px 12px;
    z-index: 9;
    cursor: pointer;
    display: none;
  }

  
@media (max-width: 450px) {
  .textbg-container {
    opacity: 0;}

  #textbg {
    height: 100vh;

    object-fit: contain;
  }

  .character-info {
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px;
    font-size: 0.9rem;
  }

  .character-info button {
    position: relative;
    margin-top: 20px;
  }
  
    .textbg-container.show {
      height: 100vh;
      left: 0;
      overflow-y: auto;
      max-width: 100vw;
      padding: 10px;
      z-index: 4;

    }
    #show-textbg-btn {
        right:  10%;
        bottom: 20px;
    }
    #hide-textbg-btn {

        left: 45vw;

    }

    .return-btn {
      z-index: 3;
    }
}