/* ==========================================
   0. 全局重置 (讓 UI 按鈕與介面保持清晰平滑)
========================================== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  image-rendering: auto;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================
   遊戲主畫面舞台與螢幕適配 (#game-container)
========================================== */
#game-container {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
  background-color: #000;
  z-index: 5000;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  justify-content: center;
  align-items: center;
}

#game-art-stage {
  position: absolute;
  width: 800px;
  height: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
  background-color: #000;
}

/* 地圖背景圖片層 */
#game-map-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* 實體角色與物件渲染層 */
#game-entities-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* 玩家角色容器 */
#game-player-avatar {
  position: absolute;
  left: 400px;
  top: 300px;
  transform: translate(-50%, -85%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 20;
}

#player-sprite-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  image-rendering: pixelated;
  background-color: transparent;
}

#player-name-tag {
  margin-top: -2px;
  font-family: 'Microsoft JhengHei', sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
  white-space: nowrap;
}

/* 天堂經典 HUD 面板 */
#game-hud-panel {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 220px;
  background: rgba(12, 10, 8, 0.82);
  border: 1px solid #7c5c32;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 0 0 5px rgba(202, 160, 82, 0.3);
  z-index: 100;
  font-family: 'Microsoft JhengHei', sans-serif;
  pointer-events: auto;
}

.hud-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

#hud-char-name {
  font-size: 13px;
  font-weight: bold;
  color: #f3d078;
}

#hud-level-tag {
  font-size: 11px;
  color: #33ff33;
  font-weight: bold;
}

.hud-bar-wrapper {
  position: relative;
  width: 100%;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #4a3821;
  border-radius: 2px;
  margin-bottom: 5px;
  overflow: hidden;
}

.hud-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.hp-fill {
  background: linear-gradient(to bottom, #ff4d4d, #990000);
}

.mp-fill {
  background: linear-gradient(to bottom, #4da6ff, #004080);
}

.hud-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
}

.hud-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(124, 92, 50, 0.5);
  font-size: 11px;
  color: #d0d0d0;
}

.hud-label {
  color: #a89060;
}

.art-stage-container {
  position: absolute;
  width: 800px;
  height: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
}

#login-screen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: hidden;
}

#login-art-stage {
  background: url('/src/assets/ui/background.png') no-repeat center center;
  background-size: 100% 100%;
}

#login-anim-image {
  position: absolute;
  left: 0px;
  top: 386px;
  width: 626px;
  height: 208px;
  pointer-events: none;
  object-fit: cover;
  z-index: 1;
}

#login-announcement, #login-box-panel {
  z-index: 2;
}

#login-announcement {
  position: absolute;
  left: 66px;
  top: 100px;
  width: 206px;
  height: 246px;            /* 剛好在左邊金框的裡面（不會超出框） */
  display: flex;
  flex-direction: column;
  color: #e0e0e0;
  font-family: 'Microsoft JhengHei', sans-serif;
}
#announcement-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 192, 90, .55) transparent;
}
#announcement-content::-webkit-scrollbar { width: 4px; }
#announcement-content::-webkit-scrollbar-thumb { background: rgba(233, 192, 90, .55); border-radius: 2px; }
#announcement-content .ann-sec { color: #f3d078; font-weight: bold; margin-top: 6px; }
#announcement-content .ann-li { padding-left: 10px; text-indent: -10px; }

#login-box-panel {
  position: absolute;
  left: 500px;
  top: 260px;
  background: url('/src/assets/ui/帳號密碼面板.png') no-repeat;
  width: 194px; 
  height: 80px;
  background-size: 100% 100%;
}

#username, #password {
  position: absolute;
  left: 90px;
  width: 74px;
  height: 20px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff;
  padding: 0 2px;
  font-size: 11px;
  font-family: 'Microsoft JhengHei', sans-serif;
  outline: none;
}
#username { top: 16px; }
#password { top: 44px; }

#login-btn {  
  position: absolute;
  left: 100px;
  top: 79px;
  width: 38px;
  height: 18px;
  border: none;
  cursor: pointer;
  background: url('/src/assets/ui/登錄.png') no-repeat center center;
  background-size: 100% 100%;
  font-size: 0;
  color: transparent;
}
#login-btn:hover { background-image: url('/src/assets/ui/登錄亮.png'); }

#register-btn {
  position: absolute;
  left: 142px;
  top: 79px;
  width: 38px;
  height: 19px;
  border: none;
  cursor: pointer;
  background: url('/src/assets/ui/註冊.png') no-repeat center center;
  background-size: 100% 100%;
  font-size: 0;
  color: transparent;
}
#register-btn:hover { background-image: url('/src/assets/ui/註冊亮.png'); }

#rules-modal, #msg-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

#rules-paper {
  position: relative;
  width: 360px;
  height: 520px;
  background: url('/src/assets/ui/規範.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 45px 35px 25px 35px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#rules-title {
  font-size: 15px;
  font-weight: bold;
  color: #2b1700;
  text-align: center;
  margin-bottom: 6px;
  font-family: 'Microsoft JhengHei', sans-serif;
}

#rules-text {
  font-size: 12px;
  color: #3a2208;
  line-height: 1.5;
  height: 270px;
  overflow-y: auto;
  font-family: 'Microsoft JhengHei', sans-serif;
  padding-left: 30px; 
  padding-right: 5px;
  border-bottom: 2px dashed rgba(100, 50, 20, 0.5);
  margin-bottom: 20px;
}

.reg-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.reg-input-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  font-size: 13px;
  font-weight: bold;
  color: #2b1700;
  font-family: 'Microsoft JhengHei', sans-serif;
  margin-left: 28px;
  gap: 12px;
}

.reg-input-row input {
  width: 152px !important;
  height: 26px !important;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #7c5c32;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 12px !important;
  color: #000;
  outline: none;
}

#rules-btn-container {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 46px;
  top: -48px;
  margin-top: 0px;
}

.rule-action-btn {
  width: 34px;
  height: 16px;
  background-size: 100% 100%;
  border: none;
  cursor: pointer;
  background-color: transparent;
}

#rule-confirm-btn { background-image: url('/src/assets/ui/同意.png'); }
#rule-confirm-btn:hover { background-image: url('/src/assets/ui/同意亮.png'); }

#rule-cancel-btn { background-image: url('/src/assets/ui/不同意.png'); }
#rule-cancel-btn:hover { background-image: url('/src/assets/ui/不同意亮.png'); }

#msg-box {
  position: relative;
  width: 230px;
  height: 120px;
  background: url('/src/assets/ui/註冊訊息.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 35px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#msg-text {
  font-size: 13px;
  font-weight: bold;
  color: #f3d078;
  text-align: center;
  font-family: 'Microsoft JhengHei', sans-serif;
  margin-top: 10px;
}

#msg-close-btn {
  position: absolute;
  left: 100px;
  top: 92px;
  width: 36px;
  height: 20px;
  background: url('/src/assets/ui/確認.png') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  cursor: pointer;
  outline: none;
}
#msg-close-btn:hover {
  background-image: url('/src/assets/ui/確認亮.png');
}

/* ==========================================
   滿版登入讀取畫面 (Loading Screen 3718.png)
========================================== */
#loading-screen {
  position: fixed;
  inset: 0;
  background-color: #000;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 4000;
  overflow: hidden;
}

#loading-art-stage {
  background: url('/src/assets/ui/3718.png') no-repeat center center;
  background-size: 100% 100%;
}

#loading-panel-container {
  position: absolute;
  left: 50%;
  bottom: 85px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

#loading-bar-wrapper {
  position: relative;
  width: 192px;
  height: 8px;
  top: 7px;
  background: url('src/assets/ui/loading2.png') no-repeat center center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  z-index: 1;
}

#loading-bar-inner {
  position: absolute;
  left: 12px;      
  top: 12px;       
  width: 238px;   
  height: 8px;    
  overflow: hidden; 
  border-radius: 1px;
  z-index: 2;
}

#loading-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;      
  height: 100%;
  background: linear-gradient(to bottom, #ff3333, #990000);
  transition: width 0.05s linear;
}

#loading-bar-mask {
  display: none;
}

#loading-percent-text {
  position: relative;
  font-size: 12px;        
  color: #f3d078;         
  font-weight: bold;      
  text-align: center;
  margin-top: -1px;        
}

#character-select-screen {
  position: fixed;
  inset: 0;
  background-color: #000;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  overflow: hidden;
}

#char-art-stage {
  background-color: #0b0704;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.char-slot-img {
  position: absolute;
  width: 172px;
  height: 268px;
  object-fit: fill;
  z-index: 2;
  cursor: pointer;
}

#char-slot-0 { left: 20px; top: 30px; }
#char-slot-1 { left: 212px; top: 30px; }
#char-slot-2 { left: 408px; top: 30px; }
#char-slot-3 { left: 600px; top: 30px; }

#char-pillar-image {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 800px;
  height: 600px;
  object-fit: fill;
  z-index: 3;
  pointer-events: none;
}

#page-switcher {
  position: absolute;
  left: 358px;
  top: 342px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

#page-switcher button {
  width: 44px;
  height: 38px;
  border: none;
  cursor: pointer;
  background-size: 100% 100% !important;
  outline: none;
  background-color: transparent;
}

#btn-page-1 {
  background-image: url('/src/assets/ui/選角第1頁.png');
}

#btn-page-2 {
  background-image: url('/src/assets/ui/選角第2頁.png');
}

/* ==========================================
   創角畫面佈局與點擊穿透修正
========================================== */
#creation-screen {
  position: fixed;
  inset: 0;
  background-color: #000;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3500;
  overflow: hidden;
}

#creation-art-stage {
  background-color: #0b0704;
  position: absolute;
  width: 800px;
  height: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; 
}

#creation-bg-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 600px;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
}

#creation-preview-img {
  position: absolute;
  left: 584px;
  top: 340px;
  transform: translate(-50%, -100%);
  width: 150px; 
  height: auto;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

#creation-preview-img.job-warrior {
  width: 193px;
  top: 341px;
}

#creation-info-box {
  position: absolute;
  left: 65px;  
  top: 60px;   
  width: 272px; 
  height: 195px; 
  padding: 5px;
  box-sizing: border-box;
  color: #f3d078;
  font-family: 'Microsoft JhengHei', sans-serif;
  overflow-y: auto; 
  z-index: 5;
  pointer-events: auto; 
}

#stat-allocation-panel {
  position: absolute;
  right: 55px;
  bottom: 125px;
  width: 260px;
  height: 75px;
  z-index: 10;
  pointer-events: auto;
}

.pure-stat-val {
  position: absolute;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  font-family: 'Microsoft JhengHei', sans-serif;
  text-align: right;
  width: 20px;
  pointer-events: none;
}

#stat-str { left: 20px; top: -4px; }
#stat-dex { left: 20px; top: 14px; }
#stat-con { left: 20px; top: 32px; }

#stat-wis { left: 165px; top: -4px; text-align: left; }
#stat-cha { left: 165px; top: 14px; text-align: left; }
#stat-int { left: 165px; top: 32px; text-align: left; }

#stat-points-left {
  position: absolute;
  left: 95px;
  top: 14px;
  width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  font-family: 'Microsoft JhengHei', sans-serif;
  pointer-events: none;
}

/* ==========================================
   【12個獨立箭頭按鈕共用樣式與位置集中區】
========================================== */
.stat-arrow-hotspot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 12;
  outline: none;
  padding: 0;
}

/* 左欄：力量 (左下右上) */
.btn-str-down { left: 48px; top: -1px; }
.btn-str-up   { left: 61px; top: -1px; }

/* 左欄：敏捷 (左下右上) */
.btn-dex-down { left: 48px; top: 18px; }
.btn-dex-up   { left: 61px; top: 18px; }

/* 左欄：體質 (左下右上) */
.btn-con-down { left: 48px; top: 37px; }
.btn-con-up   { left: 61px; top: 37px; }

/* 右欄：精神 (左下右上) */
.btn-wis-down { left: 143px; top: -1px; }
.btn-wis-up   { left: 156px; top: -1px; }

/* 右欄：魅力 (左下右上) */
.btn-cha-down { left: 143px; top: 18px; }
.btn-cha-up   { left: 156px; top: 18px; }

/* 右欄：智力 (左下右上) */
.btn-int-down { left: 143px; top: 37px; }
.btn-int-up   { left: 156px; top: 37px; }

/* ==========================================
   【基本點數加成面板：16 條項目可各自獨立移動位置】
========================================== */
#base-bonus-panel {
  position: absolute;
  left: 65px;    /* 整塊面板的基準 X 軸 */
  bottom: 60px;  /* 整塊面板的基準 Y 軸 */
  width: 410px;
  height: 175px;
  z-index: 10;
  pointer-events: none;
  font-family: 'Microsoft JhengHei', sans-serif;
}

/* 共用單行樣式：寬度固定，文字靠左、數字靠右 */
.bonus-row-item {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 152px; /* 每一行的寬度（控制文字與數字之間的距離） */
  font-size: 11px;  /* 文字大小 */
  color: #d0d0d0;   /* 文字顏色 */
}

.bonus-row-item span:last-child {
  font-weight: bold;
  color: #f3d078;   /* 數字顏色（金色） */
}

/* --- 左欄 8 項個別位置設定 (可各自修改 left 與 top 獨立移動) --- */
.row-ranged-hit  { left: -36px;   top: 29px;   }
.row-ranged-dmg  { left: -36px;   top: 49px;  }
.row-melee-hit   { left: -36px;   top: 69px;  }
.row-melee-dmg   { left: -36px;   top: 89px;  }
.row-hp-growth   { left: -36px;   top: 109px;  }
.row-mp-growth   { left: -36px;   top: 129px;  }
.row-hpr         { left: -36px;   top: 149px; }
.row-mpr         { left: -36px;   top: 169px; }

/* --- 右欄 8 項個別位置設定 (可各自修改 left 與 top 獨立移動) --- */
.row-magic-hit   { left: 142px; top: 29px;   }
.row-magic-dmg   { left: 142px; top: 49px;  }
.row-magic-crit  { left: 142px; top: 69px;  }
.row-mp-cost     { left: 142px; top: 89px;  }
.row-er          { left: 142px; top: 109px;  }
.row-mr          { left: 142px; top: 129px;  }
.row-weight      { left: 142px; top: 149px; }
.row-ac          { left: 142px; top: 169px; }


.job-icon-btn {
  position: absolute;
  width: 36px;
  height: 36px;
  border: none;
  cursor: pointer;
  z-index: 10;
  outline: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  pointer-events: auto;
}

#job-icon-prince {
  left: 395px; top: 65px;
  background-image: url('/src/assets/job/王族.png');
}
#job-icon-prince:hover, #job-icon-prince.active {
  background-image: url('/src/assets/job/王族亮.png');
}

#job-icon-elf {
  left: 395px; top: 110px;
  background-image: url('/src/assets/job/妖精.png');
}
#job-icon-elf:hover, #job-icon-elf.active {
  background-image: url('/src/assets/job/妖精亮.png');
}

#job-icon-dark {
  left: 395px; top: 155px;
  background-image: url('/src/assets/job/黑暗妖精.png');
}
#job-icon-dark:hover, #job-icon-dark.active {
  background-image: url('/src/assets/job/黑暗妖精亮.png');
}

#job-icon-illusionist {
  left: 395px; top: 200px;
  background-image: url('/src/assets/job/幻術師.png');
}
#job-icon-illusionist:hover, #job-icon-illusionist.active {
  background-image: url('/src/assets/job/幻術師亮.png');
}

#job-icon-knight {
  left: 438px; top: 65px;
  background-image: url('/src/assets/job/騎士.png');
}
#job-icon-knight:hover, #job-icon-knight.active {
  background-image: url('/src/assets/job/騎士亮.png');
}

#job-icon-mage {
  left: 438px; top: 110px;
  background-image: url('/src/assets/job/法師.png');
}
#job-icon-mage:hover, #job-icon-mage.active {
  background-image: url('/src/assets/job/法師亮.png');
}

#job-icon-Dknight {
  left: 438px; top: 155px;
  background-image: url('/src/assets/job/龍騎士.png');
}
#job-icon-Dknight:hover, #job-icon-Dknight.active {
  background-image: url('/src/assets/job/龍騎士亮.png');
}

#job-icon-warrior {
  left: 438px; top: 200px;
  background-image: url('/src/assets/job/戰士.png');
}
#job-icon-warrior:hover, #job-icon-warrior.active {
  background-image: url('/src/assets/job/戰士亮.png');
}

#gender-icon-male {
  position: absolute;
  left: 470px; 
  top: 345px;
  width: 32px;
  height: 38px;
  background: url('/src/assets/ui/性別男.png') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  cursor: pointer;
  z-index: 10;
  outline: none;
  pointer-events: auto;
}
#gender-icon-male:hover, #gender-icon-male.active {
  background-image: url('/src/assets/ui/性別男亮.png');
}

#gender-icon-female {
  position: absolute;
  left: 684px; 
  top: 345px;
  width: 32px;
  height: 38px;
  background: url('/src/assets/ui/性別女.png') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  cursor: pointer;
  z-index: 10;
  outline: none;
  pointer-events: auto;
}
#gender-icon-female:hover, #gender-icon-female.active {
  background-image: url('/src/assets/ui/性別女亮.png');
}

/* 角色名稱輸入框：已調整好位置大小並隱藏外框與底色 */
#creation-char-name {
  position: absolute;
  left: 546px;   
  top: 474px;    
  width: 134px;  
  height: 18px;  
  background: transparent !important; 
  border: none !important;            
  color: #fff;                                      
  font-size: 11px;                                  
  font-family: 'Microsoft JhengHei', sans-serif;
  outline: none;
  padding: 0 4px;
  z-index: 999999 !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

#creation-btn-start {
  position: absolute;
  left: 495px;
  top: 535px;
  width: 110px;
  height: 32px;
  background: #caa052;
  color: #000;
  border: none;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
  z-index: 10;
  pointer-events: auto;
}

#creation-btn-back {
  position: absolute;
  left: 615px;
  top: 535px;
  width: 110px;
  height: 32px;
  background: #333;
  color: #fff;
  border: 1px solid #7c5c32;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
  z-index: 10;
  pointer-events: auto;
}

.char-slot-img {
  position: absolute;
  width: 172px;
  height: 268px;
  object-fit: fill;
  z-index: 2;
  cursor: pointer;
  filter: brightness(0.55) contrast(1);
  transition: filter 0.2s ease;
}

.char-slot-img.active {
  filter: brightness(1.15) contrast(1.1);
}

.char-slot-img {
  position: absolute;
  width: 184px;   
  height: 300px;  
  object-fit: fill;
  z-index: 2;
  cursor: pointer;
  filter: brightness(0.55) contrast(1);
  transition: filter 0.2s ease;
}

#char-slot-0 { left: 20px;  top: 30px; }
#char-slot-1 { left: 212px; top: 30px; }
#char-slot-2 { left: 408px; top: 30px; }
#char-slot-3 { left: 600px; top: 30px; }

.char-slot-img.active {
  filter: brightness(1.15) contrast(1.1);
}

/* ==========================================
   選角畫面下方角色詳細資訊面板 DOM 佈局
========================================== */
#char-info-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 600px;
  pointer-events: none;
  z-index: 5;
  font-family: 'Microsoft JhengHei', sans-serif;
  font-size: 12px;
  color: #ffe4ca;
}

.char-info-val {
  position: absolute;
  height: 18px;
  line-height: 18px;
  white-space: nowrap;
}

#info-char-name  { left: 234px; top: 388px; font-weight: bold;  font-size: 12px;}
#info-clan-name  { left: 234px; top: 408px; font-weight: bold;  font-size: 12px;}
#info-job-name   { left: 234px; top: 443px; font-weight: bold;  font-size: 12px;}
#info-alignment  { left: 234px; top: 468px; font-weight: bold;  font-size: 12px;}
#info-hp         { left: 234px; top: 500px; font-weight: bold;  font-size: 12px;}
#info-mp         { left: 234px; top: 527px; font-weight: bold;  font-size: 12px;}
#info-ac         { left: 234px; top: 551px; font-weight: bold;  font-size: 12px;}

#info-level      { left: 568px; top: 391px; font-weight: bold;  font-size: 14px;}
#info-str        { left: 516px; top: 426px; font-weight: bold;  font-size: 12px;}
#info-dex        { left: 516px; top: 451px; font-weight: bold;  font-size: 12px;}
#info-con        { left: 516px; top: 476px; font-weight: bold;  font-size: 12px;}
#info-wis        { left: 516px; top: 501px; font-weight: bold;  font-size: 12px;}
#info-cha        { left: 516px; top: 527px; font-weight: bold;  font-size: 12px;}
#info-intel      { left: 516px; top: 551px; font-weight: bold;  font-size: 12px;}

#info-birthday   {     /*角色誕生日*/
  position: absolute;
  left: 660px; 
  top: 450px;  
  font-size: 13px;
  color: #DDDDFF; 
  font-weight: bold;
  letter-spacing: 0.5px;
  pointer-events: none; 
}

.alignment-lawful  { color: #4da6ff; } 
.alignment-neutral { color: #ffffff; } 
.alignment-chaotic { color: #ff4d4d; } 

.no-clan-dash {
  font-weight: 800;   
  font-size: 26px;    
}

/* ==========================================
   選角畫面右下角三個功能按鈕樣式
========================================== */
.char-action-btn {
  position: absolute;
  width: 80px;   
  height: 24px;  
  border: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  pointer-events: auto; 
}

#btn-create-char {
  left: 660px;
  top: 486px;
  background-image: url('/src/assets/ui/創建角色.png');
}
#btn-create-char:hover {
  background-image: url('/src/assets/ui/創建角色亮.png');
}

#btn-delete-char {
  left: 660px;
  top: 515px;
  background-image: url('/src/assets/ui/刪除角色.png');
}
#btn-delete-char:hover {
  background-image: url('/src/assets/ui/刪除角色亮.png');
}

#btn-return-login {
  left: 660px;
  top: 544px;
  background-image: url('/src/assets/ui/返回登錄.png');
}
#btn-return-login:hover {
  background-image: url('/src/assets/ui/返回登錄亮.png');
}