/* 移除瀏覽器預設樣式，確保全螢幕顯示 */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
    font-family: sans-serif;
    width: 100vw;
    height: 100dvh;
    background-image: url(img/background_9_1.jpg); /*調整底圖*/
    
    background-size: cover; 
    
    /* 定義子容器置中 */
    display: flex;
    justify-content: center;
    align-items: center;
    overscroll-behavior: contain; 
}

#custom-tooltip {
    /* 必須是定位元素 */
    position: absolute; 
    /* 確保它在所有其他元素之上 */
    z-index: 9999; 

    display: none;
    
    opacity: 0.7;
    
    /* 設置基本樣式 */
    padding: 6px 10px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap; /* 內容不換行 */
    /* 避免滑鼠進入 Tooltip 本身時，mousemove 停止 */
    pointer-events: none; 
}

/* 愛心特效 */
#heart {
    display: none; 
    transform-origin: 50% calc(50% + 90px);
    background-image: url(img/player/map_heart.gif);
    
    width: 25px;
    height: 25px;
    
    /* 讓圖片縮放以完全覆蓋容器，同時保持長寬比 */
    background-size: cover; 
    /* 確保圖片從容器的中央開始對齊 */
    background-position: center;
}

/* 建立一個 3D 空間 */
.scene {
    
    position:relative; 
    overflow: clip;
    
    width: 2000px;
    height: 2000px;
    
    left: calc(50% - 1000px);
    top: calc(50% - 1000px);
    
    /* 定義子容器置中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 地圖上放置的桌椅等物件 */
.area-item {
    /* 讓圖片縮放以完全覆蓋容器，同時保持長寬比 */
    background-size: cover; 
    /* 確保圖片從容器的中央開始對齊 */
    background-position: center;
    
    text-align: center ;
}

/* 角度控制面板 */
#controls {
    /*
    */
    display: none;

    background-color:#fff5; 
    position:absolute; 
    left:10px; 
    top:50px; 
    padding: 20px; 
    border: 1px solid #ccc;
    z-index: 999;
}

/* 負責 3D 旋轉的容器 */
#map-container {
    width: 1600px;
    height: 1250px;
    background-image: url(img/map_work_area_mini.png);
    transform-origin: 50% 50%;
    position: relative;

    /* 讓子元素處於同一 3D 空間 */
    transform-style: preserve-3d;
    
    /* 讓圖片縮放以完全覆蓋容器，同時保持長寬比 */
    background-size: cover; 
    
    /* 確保圖片從容器的中央開始對齊 */
    background-position: center;
}


/* 地圖上的場地元素 */
.venue-element {
    position: absolute;
    text-align: center;
    transform-origin: 50% 100%;
    z-index: 10;
}

/* 文字告示牌 */
.sign {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
    padding: 10px;
}

/* 角色圖大小 */
.playerbackground {
    width: 90px;
    height: 90px;
    background-size: contain;
}
.player {
    pointer-events: none;
}
#Midoriya {
    left: 515px;
    top: 795px;
}
#Midoriya > .playerbackground {
    background-image: url(img/player/Midoriya.gif);
}
#Bakugo {
    left: 944px;
    top: 404px;
}
#Bakugo > .playerbackground {
    background-image: url(img/player/Bakugo.gif);
}



/* XYZ 軸的通用樣式 */
.axis {
    position: absolute; /* 相對於 #map-container 定位 */
    top: 50%;
    left: 50%;
    transform-origin: 0 0; /* 讓旋轉從軸線的起點開始 */
}

.x-axis {
    width: 200px;
    height: 3px;
    background-color: red;
    transform: translateX(0) translateY(-1.5px) translateZ(0); 
}

.y-axis {
    width: 3px;
    height: 200px;
    background-color: green;
    transform: translateX(0) translateY(-100%) translateZ(0) 
}

.z-axis {
    width: 200px;
    height: 3px;
    background-color: blue;
    transform: translateX(0) translateY(0) translateZ(-1.5px) rotateY(-90deg);
}

.main-contain {
    overflow: hidden;
    
}
.scene-container {
    width: 100vw;
    height: 50dvh;
}





/* 往返路徑
@keyframes MidoriyaPath {
    0%    {left: 60%;top: 30%;}
    25%   {left: 60%;top: 10%;}
    50%   {left: 30%;top: 10%;}
    75%   {left: 30%;top: 50%;}
    100%  {left: 40%;top: 50%;}
}

#Midoriya {
    animation-name: MidoriyaPath;
    animation-duration: 10s;       
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-direction: alternate;    
    
}
#Bakugo, #Midoriya, #heart {
    border: solid black 1px;
}
.venue-element, .area-item {
    border: solid black 1px;
}

 */
 
 .mission_map_info_stall_card .divider {
     background-color: #f08e5c;
 }
 
 .map_warning {
    display: flex;
    flex-direction: row-reverse;
    background-color: #ffffff;
    z-index: 20;
    position: relative;
    height: 5dvh;
 }
  .map_warning_text {
    width: fit-content;
    height: fit-content;
    margin: auto 16px auto auto;
    color: #404040;
    line-height: 2vh;
 }
 
.mission_map_info {/*卡片資訊區塊 含攤位卡片 攤位列表*/
    position: relative;
    
    height: 45dvh;
    z-index: 20;
    background-color: #ffffff;

    align-items: flex-start; /* 子元素垂直方向不拉伸，並垂直置中 */
    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 120px;
    width: auto;
    padding: 16px 16px 0px 16px;
  }
  
  div.list_content{ /*列表內容*/
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding:8px 16px;

    color: #404040;
    width: 100%;
    height: 33dvh;
    overflow-y: auto;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  div.mission_map{ /*地圖區塊*/
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  div.map { /*地圖*/
    width: 100%;
    height: 300px;
    background-color: #9d9d9d;
  }
  div.map_warning{
    width: 100%;
    padding-right: 80px;
    text-align: right;
  }
  div.map_warning p { /*地圖警語*/
    color: #404040;
    text-align: right;
    line-height: 1;
  }



  div.mission_map_info_stall_card { /*攤位卡片*/
    height: 45dvh;
    width: 500px;
  }
  
  div.stall_card_class { /**/
    height: 3dvh;
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
  }
  /*div.mission_map_info > div{ 
    padding:16px 32px;
  }*/
  div.stall_card_class div { /*CP類型 攤位編號*/
    padding: 0px 16px;
    border: 1.5px solid rgba(239, 141, 91);
    border-radius: 8px;
    color: #404040;
    font-size: 1.8dvh;
    align-content: center;
  }
  div.stall_card_name { /*攤位名稱*/
    width: 100%;
    height: 4dvh;
    text-align: center;
    align-content: center;
    font-size: 2.5dvh;
    font-weight: bold;
    color: #404040;
  }
  div.mission_map_info_stall_card .divider { /*分隔線*/
    width: 100%;
    height: 1.5px;
    border-width: 1px;
    margin: 8px 0;
  }
  
  table.stall_info { /* 攤位資訊表格 */
    width: 100%;
    color: #404040;
    border-collapse: collapse;
    table-layout: auto;
  }
  
  table.stall_info td {
    padding: 8px 0;
  }
  .stall_goods_title , .stall_sns_title {
    font-weight: bold; 
    white-space: nowrap; /*確保文字不換行，寬度貼合內容 */
    width: 1px; /*告訴瀏覽器這個欄位只需要最小寬度 */
  }
  
  .stall_good_info , .stall_sns_link { /*小說/連結網址*/
    width: auto; /* 移除任何寬度限制，確保它會填滿剩餘的 100% 寬度 */
  }
  
  .stall_sns {
    vertical-align: text-top;
  }
  .stall_goods {
    vertical-align: text-top;
  }
  .mark_div {
      color: #404040;
      font-size: 14px;
  }
  
  
  
  
  /*------------以下攤位列表------------*/
  
  div.mission_map_stall_list { /*攤位列表*/
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column; /*垂直*/
    width: 256px;
    border: 1.5px solid #B6AB99;
    border-radius: 8px;
  }
  div.list_title > div:first-child{
    border-top-left-radius: 6.5px;
  }
  div.list_title > div:last-child{
    border-top-right-radius: 6.5px;
  }
  
  div.list_title{ /*官方任務 攤位資訊*/
    display: flex;
    width: 100%;
  }
  div.list_title > div { /*官方資訊 攤位資訊*/  /*這裡做切換*/
    padding:4px 0px;
    /*border-top: 1.5px solid #B6AB99;
    border-left: 1.5px solid #B6AB99;
    border-right: 1.5px solid #B6AB99;
    border-bottom: 3px solid #B6AB99;
    border-radius:8px 8px 0px 0px;*/
    background-color: #b6ab99;
    color: rgba(255, 255, 255, 0.7);
    width: 50%;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease-in-out;

  }
  div.list_title > div:hover{ /*懸停狀態 官方資訊 攤位資訊*/

    color: rgba(255, 255, 255, 1);
    
  }

    div.list_title > div.tab-active { /*選中時的樣式*/
    color: #404040;
    background-color: #ffffff;
  }
  

  
  /*------------以下官方任務列表------------*/
  
  div.stall_official { /*官方任務區塊*/
    display:flex;
    flex-direction: column;
    gap: 8px;
    align-items:flex-start;
  }
  div.stall_official .divider{
    width: 100%;
    height: 1.5px;
    background-color: #b6ab99;
  }
  div.stall_official_type{ 
    padding:2px 4px;
    border-radius:8px;
    font-size:14px;
    background-color: #b6ab99;
    color: #ffffff;
  }
  div.stall_official_evnet{
    padding-left: 4px;
  }
  div.stall_official_evnet .evnet_name:hover{ /*懸停狀態*/
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
  }
  

  /*------------以下攤位資訊列表------------*/
  div.stall_creator{
    display:none;
    flex-direction: column; /*垂直*/
    gap:16px;
  }
  
  /*------------共同攤位table設定------------*/
  div.stall_creator table td {
    padding: 4px 8px;
  }
  /*------------幼馴染攤位設定------------*/
  div.stall_creator .cp_type_osanana .cp_type_name{  /*分類顏色*/
    display: flex;
    width:100%;
    color: #eabb6a;
    align-items: center;
    gap: 8px;
  }
  .cp_type_osanana .divider{
    flex-grow: 1; /* 關鍵：佔據所有剩餘空間，兩者平均分配 */
    flex-basis: 0; /* 從 0 寬度開始計算 */
    height: 1.5px;
    background-color: #eabb6a;
  }
  div.cp_type_osanana table {
    border-collapse: separate;
    border-spacing: 0 4px;
    
  }
  div.stall_creator .cp_type_osanana td.number{
    white-space: nowrap; /*確保文字不換行，寬度貼合內容 */
    width: 1px; /*告訴瀏覽器這個欄位只需要最小寬度 */
    padding-top: 4px; 
    padding-bottom: 4px; 
  }
  div.stall_creator .cp_type_osanana td.stall_name{
    width: 100%;
  }
  div.stall_creator .cp_type_osanana tr{ /*預設狀態*/
    background-color: rgba(234, 187, 106, 0.3);
    transition: background-color 0.2s ease-in-out;
  }
  div.cp_type_osanana table tr:hover{ /*懸停狀態*/
    background-color: rgba(234, 187, 106, 0.7);
    cursor: pointer;
  }
  
  
  /*------------勝出攤位設定------------*/
  div.stall_creator .cp_type_bkdk .cp_type_name{  /*分類顏色*/
    display: flex;
    width:100%;
    color: #EF8D5B;
    align-items: center;
    gap: 8px;
  }
  div.stall_creator .cp_type_bkdk .divider{
    flex-grow: 1; /* 關鍵：佔據所有剩餘空間，兩者平均分配 */
    flex-basis: 0; /* 從 0 寬度開始計算 */
    height: 1.5px;
    background-color: #EF8D5B;
  }
  div.cp_type_bkdk table {
    border-collapse: separate;
    border-spacing: 0 4px;
    
  }
  div.stall_creator .cp_type_bkdk td.number{
    white-space: nowrap; /*確保文字不換行，寬度貼合內容 */
    width: 1px; /*告訴瀏覽器這個欄位只需要最小寬度 */
    padding-top: 4px; 
    padding-bottom: 4px; 
  }
  div.stall_creator .cp_type_bkdk td.stall_name{
    width: 100%;
  }
  div.stall_creator .cp_type_bkdk tr{ /*預設狀態*/
    background-color: rgba(239, 141, 91, 0.3);
    transition: background-color 0.2s ease-in-out;
  }
  div.cp_type_bkdk table tr:hover{ /*懸停狀態*/
    background-color: rgba(239, 141, 91, 0.7);
    cursor: pointer;
  }
  
  /*------------出勝攤位設定------------*/
  div.stall_creator .cp_type_dkbk .cp_type_name{  /*分類顏色*/
    display: flex;
    width:100%;
    color: #9EC98D;
    align-items: center;
    gap: 8px;
  }
  div.stall_creator .cp_type_dkbk .divider{
    flex-grow: 1; /* 關鍵：佔據所有剩餘空間，兩者平均分配 */
    flex-basis: 0; /* 從 0 寬度開始計算 */
    height: 1.5px;
    background-color: #9EC98D;
  }
  div.cp_type_dkbk table {
    border-collapse: separate;
    border-spacing: 0 4px;
    
  }
  div.stall_creator .cp_type_dkbk td.number{
    white-space: nowrap; /*確保文字不換行，寬度貼合內容 */
    width: 1px; /*告訴瀏覽器這個欄位只需要最小寬度 */
    padding-top: 4px; 
    padding-bottom: 4px; 
  }
  div.stall_creator .cp_type_dkbk td.stall_name{
    width: 100%;
  }
  div.stall_creator .cp_type_dkbk tr{  /*預設狀態*/
    background-color: rgba(158, 201, 141, 0.3);
    transition: background-color 0.2s ease-in-out;
  }
  
  div.cp_type_dkbk table tr:hover{ /*懸停狀態*/
    background-color: rgba(158, 201, 141, 0.7);
    cursor: pointer;
  }
  
  /*以下為JS新增樣式*/
  

  
  /*以下調整滾輪樣式*/
  
  div.list_content::-webkit-scrollbar {
  width: 4px; /* 滾輪的寬度 */
  }
  div.list_content::-webkit-scrollbar-thumb {
  background-color: #B6AB99; /* 滑塊顏色 (橘 勝出的主題色) */
  border: 4px solid #B6AB99; /* 讓滑塊看起來被軌道包住 */
  }
  div.list_content {
  /* For Firefox: 顏色依序為滑塊和軌道 */
  scrollbar-color: #B6AB99 #ffffff; 
  /* For Firefox: 讓滾輪變細 */
  scrollbar-width: thin; 
  } 
  div.official_block::-webkit-scrollbar {
  width: 4px; /* 滾輪的寬度 */
  }
  div.official_block {
  /* For Firefox: 顏色依序為滑塊和軌道 */
  scrollbar-color: #B6AB99 #ffffff; 
  /* For Firefox: 讓滾輪變細 */
  scrollbar-width: thin; 
  color: #404040;
  } 
  
  
  .official_info tr {
    vertical-align: text-top;
  }
  
  .official_desc {
    width: 100px;
      
  }
  
  .inner_tr {
    vertical-align: text-top;
  }
  
  .official_info > tbody > tr > td:first-child{
      white-space: nowrap;
      font-weight: bold;
  }
  
  .official_block {
    height: 28dvh;
    font-size: 1.6dvh;
    overflow-y: auto;
  }
  .official_link{
    margin: 0px auto;
    padding: 4px 16px;
    border-radius: 8px;
    border: 1.5px solid rgb(204, 74, 117);
    font-size: 1.6dvh;
    width: fit-content;
  }
  
  .official_link > a:link, .official_link > a:visited{
    color: rgb(204, 74, 117);
    text-decoration: none;
  }
  
  .stall_sns_link > a:link, .stall_sns_link > a:visited{
    color: #404040;
    text-decoration: none;
  }
  
  a:hover {
    font-weight: bold;
    text-decoration: none;
  }
  
  .official_link_container {
    padding-bottom: 3dvh;
    width: 100%;
    background-color: #ffffff
  }
  .tr_space {
    height: 40dvh;
  }

  .link_svg {
    vertical-align: bottom;
    transform: rotate(-45deg);
  }


@media (max-aspect-ratio: 1/1) {
    
  div.mission_map_stall_list{ 
    display:none;
  }
  
  .mark_div {
      font-size: 10px;
  }
  
  div.lezi_wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100vw;
    
  }
  div.mission_map{
    width: 100%;
  }
  div.mission_map .map{
    width: 100%;
    height:360px;
    background-color: #e0e0e0;
  }
  div.map_warning{
    color: #404040;
    text-align: right;
    line-height: 1;
    padding-right:16px;
  }
  div.mission_map_info{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:7px;
    width: 100%;
    padding: 0 0px;
  }
  div.mission_map_info_stall_card{
    width: 90%;
    gap: 1dvh;
  }
  div.stall_card_class{
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    gap: 16px;
    
  }
  div.stall_card_class div {
    font-size: 1.4dvh;
    align-content: center;
  }
  div.stall_card_name { 
    align-content: center;
    font-size: 2.2dvh;
  }
  
  table.stall_info{
    font-size: 1.8dvh ; 
  }
  .official_info{
    font-size: 1.8dvh ; 
  }
  div.divider{
    width: 100%;
    height: 1.5px;
    background-color: rgba(239, 141, 91);
  }
  
  .official_block {
    width: 90vw;
    margin: auto;
  }
  .official_link_container {
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: 32px;
  }
  .official_link{
    font-size: 1.6dvh;
    width: fit-content;
    margin: 4px auto;
  }

}