@font-face {
    font-family: 'CookieRun\ Bold.otf';
    src: url('../fonts/CookieRun\ Bold.otf');
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'CookieRun\ Bold.otf';
}
html, body {
  height: 100%;           /* 讓 body 及 html 滿高 */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: 'CookieRun Bold.otf';
  background: #4a7abd;
  //background: linear-gradient(0deg,rgba(74, 122, 189, 1) 7%, rgba(3, 57, 115, 1) 82%);
  background-image: url('../images/bg_img.png');
}

/* YouTube 播放器樣式 */
#youtube-player {
    position: fixed;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 248px;
    height: 140px; /* 修改高度 */
    z-index: 999999;
}
#youtube-player2 {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 248px;
    height: 140px; /* 修改高度 */
    z-index: 999999;
}
/* Save 按鈕樣式 */
#save-button {
    position: absolute;
    bottom: 120px; /* 放置在選項卡上方 */
    left: 75%;
    //transform: translateX(-50%);
    padding:4px 15px;
    background-color: rgba(28, 74, 131, .8);
    border: 3px solid rgba(28, 75, 131, .5);
    border-radius: 15px;
    color: #D1DBE6;
    font-family: 'CookieRun\ Bold';
    font-size: 12px;
    cursor: pointer;
    z-index: 999;
}
#save-button:hover {
    background-color: #103561;
}
#wrap {
  flex: 1 0 auto;        /* 自動撐高，撐滿剩餘空間 */
  max-width: 900px;
  width: 100%;
  margin: 5px auto 10px;
  height: auto;          /* 不需要固定高度 */
  border: 3px solid rgba(28, 74, 131,.8);
  border-radius: 45px;
  backdrop-filter: blur(1.5px);
  background: radial-gradient(circle,rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .6) 90%);
  //background-image: url('../images/main.png');
  background-repeat: no-repeat;
  background-position: center;
  //background-size: 550px;
  overflow: hidden;
  box-shadow: 2px 5px 10px rgba(28, 74, 131,.5);
}

 #footer {
  //flex-shrink: 0;        /* 防止 footer 被壓縮 */
  width: 100%;
  background: radial-gradient(circle,rgba(74, 122, 189, 1) 0%, rgba(18, 62, 112, 1) 100%);
  text-align: center;
  padding: 8px 0;
  border-radius: 0px 0px 0 0;
  font-size: 14px;
  color: #8CB6DB;
  //border-top: 2px solid #eee;
  box-shadow: 0 -2px 5px rgba(0,0,0,.5);
  z-index: 1000;
  //position: relative;    /* 不要用 fixed，避免蓋內容 */
}
input {
    display: none;
}
/* 標籤選單標題 */
.tabBox {
    position: absolute;
    bottom: 80px;
    left: 0;
    display: flex;
    justify-content: #8CB6DB ;
    width: 100%;
}
.tabBox > label {
    width: 100%;
    text-align: center;
    padding: 5px 0;
    background-color: rgba(28, 74, 131, .8);
    border: 3px solid rgba(28, 74, 131, .5)  ;
    border-bottom: 0;
    border-radius: 15px 15px 0 0;
    box-sizing: border-box;
    z-index: 999;
    font-size: 12px;
    color: #D1DBE6;
    cursor: pointer;
}
.aaaa{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 550px;
    z-index: 5;
}
/* 選項卡選單內容 */
.item {
    display: none;
    justify-content: PowderBlue ;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 999;
    overflow: hidden;
}
.item > label {
    width: 100%;
    text-align: center;
    cursor: pointer;

}
.item > label img {
    height: 95%;
    padding: 2px;
    margin: 2px 5px 5px 5px;
    background-color: rgba(28, 74, 131, .2);
    border: 2px solid rgba(28, 74, 131, .5);
    border-radius: 25px;
    box-sizing: border-box;
    z-index: 999;

}
.on {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 500px;
    z-index: 2;
}
//.selectable-item {
  cursor: pointer;
  transition: 0.3s ease;
  border-radius: 10px;
  border: 3px solid transparent; /* 初始透明框線，避免 layout 跳動 */
}

//.selectable-item.selected {
  border-color: #4caf50; /* 綠色邊框 */
  filter: brightness(1.2) saturate(1.3);
  box-shadow: 0 0 10px #4caf50;
}


/* 頭 on */
.on_hair1 {background-image: url('../images/hair/hair1.png');z-index:7}
.on_hair2 {background-image: url('../images/hair/hair2.png');z-index:7}
.on_hair3 {background-image: url('../images/hair/hair3.png');z-index:7}
.on_hair4 {background-image: url('../images/hair/hair4.png');z-index:7}
.on_hair5 {background-image: url('../images/hair/hair5.png');z-index:7}
.on_hair6 {background-image: url('../images/hair/hair6.png');z-index:7}
.on_hair7 {background-image: url('../images/hair/hair7.png');z-index:7}
.on_hair8 {background-image: url('../images/hair/hair8.png');z-index:7}
.on_hair9 {background-image: url('../images/hair/hair9.png');z-index:7}
.on_hair10 {background-image: url('../images/hair/hair10.png');z-index:7}
.on_hair11 {background-image: url('../images/hair/hair11.png');z-index:12}

/* 上衣 on */
.on_top1 {background-image: url('../images/top/top1.png');z-index: 9}
.on_top2 {background-image: url('../images/top/top2.png');z-index: 9}
.on_top3 {background-image: url('../images/top/top3.png');z-index: 9}
.on_top4 {background-image: url('../images/top/top4.png'); z-index:9}
.on_top5 {background-image: url('../images/top/top5.png'); z-index: 9}
.on_top6 {background-image: url('../images/top/top6.png'); z-index: 9}
.on_top7 {background-image: url('../images/top/top7.png'); z-index: 9}
.on_top8 {background-image: url('../images/top/top8.png');z-index: 9}
.on_top9 {background-image: url('../images/top/top9.png');z-index: 9}
.on_top10 {background-image: url('../images/top/top10.png');z-index: 9}
.on_top11 {background-image: url('../images/top/top11.png');z-index: 9}
.on_top12 {background-image: url('../images/top/top12.png');z-index: 9}
.on_top13 {background-image: url('../images/top/top13.png');z-index: 9}

/* 下裝 on */
.on_bottom1 {background-image: url('../images/bottom/bottom1.png'); z-index: 8;}
.on_bottom2 {background-image: url('../images/bottom/bottom2.png'); z-index: 8;}
.on_bottom3 {background-image: url('../images/bottom/bottom3.png'); z-index: 8;}
.on_bottom4 {background-image: url('../images/bottom/bottom4.png'); z-index: 8;}
.on_bottom5 {background-image: url('../images/bottom/bottom5.png'); z-index: 8;}
.on_bottom6 {background-image: url('../images/bottom/bottom6.png'); z-index: 8;}
.on_bottom7 {background-image: url('../images/bottom/bottom7.png'); z-index: 8;}
.on_bottom8 {background-image: url('../images/bottom/bottom8.png'); z-index: 8;}
.on_bottom9 {background-image: url('../images/bottom/bottom9.png'); z-index: 11;}

/* 表情 on */
.on_emoji1 {background-image: url('../images/emoji/emoji1.png'); z-index:6;}
.on_emoji2 {background-image: url('../images/emoji/emoji2.png'); z-index: 6;}
.on_emoji3 {background-image: url('../images/emoji/emoji3.png');z-index: 6}
.on_emoji4 {background-image: url('../images/emoji/emoji4.png');z-index: 6}
.on_emoji5 {background-image: url('../images/emoji/emoji5.png');z-index: 6}
.on_emoji6 {background-image: url('../images/emoji/emoji6.png');z-index: 6}
.on_emoji7 {background-image: url('../images/emoji/emoji7.png'); z-index: 6;}
.on_emoji8 {background-image: url('../images/emoji/emoji8.png'); z-index: 6;}
.on_emoji9 {background-image: url('../images/emoji/emoji9.png'); z-index: 6;}

/* 配件A on */
.on_acc_A1 {background-image: url('../images/acc_A/acc_A1.png'); z-index: 12;}
.on_acc_A2 {background-image: url('../images/acc_A/acc_A2.png'); z-index: 6;}
.on_acc_A3 {background-image: url('../images/acc_A/acc_A3.png'); z-index: 12;}
.on_acc_A4 {background-image: url('../images/acc_A/acc_A4.png'); z-index: 12;}
.on_acc_A5 {background-image: url('../images/acc_A/acc_A5.png'); z-index: 13;}
.on_acc_A6 {background-image: url('../images/acc_A/acc_A6.png'); z-index: 4;}
.on_acc_A7 {background-image: url('../images/acc_A/acc_A7.png'); z-index: 15;}
.on_acc_A8 {background-image: url('../images/acc_A/acc_A8.png'); z-index: 12;}

/* 配件B on */
.on_acc_B1 {background-image: url('../images/acc_B/acc_B1.png'); z-index: 13;}
.on_acc_B2 {background-image: url('../images/acc_B/acc_B2.png'); z-index: 13;}
.on_acc_B3 {background-image: url('../images/acc_B/acc_B3.png'); z-index: 13;}
.on_acc_B4 {background-image: url('../images/acc_B/acc_B4.png'); z-index: 13;}
.on_acc_B5 {background-image: url('../images/acc_B/acc_B5.png'); z-index: 13;}
.on_acc_B6 {background-image: url('../images/acc_B/acc_B6.png'); z-index: 13;}
.on_acc_B7 {background-image: url('../images/acc_B/acc_B7.png'); z-index: 12;}
.on_acc_B8 {background-image: url('../images/acc_B/acc_B8.png'); z-index: 12;}
.on_acc_B9 {background-image: url('../images/acc_B/acc_B9.png'); z-index: 12;}
.on_acc_B10 {background-image: url('../images/acc_B/acc_B10.png'); z-index: 5;}
.on_acc_B11 {background-image: url('../images/acc_B/acc_B11.png'); z-index: 13;}

/* 點選標籤選單 */
#tab1:checked ~ .tabBox > label[for="tab1"],
#tab2:checked ~ .tabBox > label[for="tab2"],
#tab3:checked ~ .tabBox > label[for="tab3"],
#tab4:checked ~ .tabBox > label[for="tab4"],
#tab5:checked ~ .tabBox > label[for="tab5"],
#tab6:checked ~ .tabBox > label[for="tab6"] {background-color: rgba(48, 168, 194,.8)  ;}

#tab1:checked ~ .hair,
#tab2:checked ~ .emoji,
#tab3:checked ~ .top,
#tab4:checked ~ .bottom,
#tab5:checked ~ .acc_A,
#tab6:checked ~ .acc_B {display: flex;background-color: rgba(48, 168, 194,.8)  ;}

/* 點擊頭部 */
input[name="item-hair"]:checked + .on {display: block;}
/* 上衣部分 頭部  */
input[name="item-top"]:checked + .on {display: block;}
/* 下裝部分 頭部  */
input[name="item-bottom"]:checked + .on {display: block;}
/* 表情部分 頭部  */
input[name="item-emoji"]:checked + .on {display: block;}
/* 配件A部分 頭部 */
input[name="item-acc_A"]:checked + .on {display: block;}
/* 配件B部分 頭部 */
input[name="item-acc_B"]:checked + .on {display: block;}

