body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background-color: #f0f2f5;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 1300px; 
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 25px;
    text-align: center; 
}

#editor-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px; 
}

#card-editor {
    width: 767px;  
    height: 1073px; 
    position: relative;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden; 
    flex-shrink: 0; 
}

#card-editor > img,
#card-editor > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#card-editor > img {
    object-fit: cover; 
    object-position: center;
    pointer-events: none; 
}

/* !! 關鍵改動：z-index 堆疊順序 (11 層) !! */
#player-image-canvas { z-index: 1; } /* Canvas 現在是底層 */
#frame-layer { z-index: 2; }
/* --- 耐久度/費用 --- */
#extra-layer-base { z-index: 3; }
#extra-layer-faction { z-index: 4; }
#extra-layer-text { z-index: 5; }
#extra-layer-number { z-index: 6; }
/* --- 支援 --- */
#support-range-layer { z-index: 7; }
#support-value-layer { z-index: 8; }
/* --- 戰力 --- */
#power-layer { z-index: 9; }
/* --- 勢力 --- */
#affiliation-layer { z-index: 10; } /* !! 新增 !! */
/* --- 文字 --- */
#text-canvas { z-index: 11; } /* 往後推 */
/* --- 最上層 --- */
#top-frame-layer { z-index: 12; } /* 往後推 */


#player-image-canvas {
    background-color: transparent; 
    pointer-events: auto;
    cursor: grab; 
}

/* !! 關鍵改動：確保文字畫布是透明且「可穿透」的 !! */
#text-canvas {
    pointer-events: none; /* 讓滑鼠點擊可以穿透到下面的 player-image-canvas */
}

#controls-panel {
    display: flex;
    flex-direction: column; 
    gap: 20px; 
    flex-grow: 1; 
    max-width: 300px; 
}

.control-group {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
    width: 100%;
}

.control-group label {
    font-weight: bold;
    color: #555;
}

/* 旗艦/費用/支援/戰力 選項群組 */
#leader-options-group,
#cost-options-group,
#support-options-group,
#power-options-group {
    display: none; /* 預設隱藏 */
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    gap: 15px; 
}
#leader-options-group > label,
#cost-options-group > label,
#support-options-group > label,
#power-options-group > label {
    font-size: 1.1em;
    color: #000;
}
#leader-options-group hr,
#cost-options-group hr,
#support-options-group hr,
#power-options-group hr {
    width: 100%;
    border: none;
    border-top: 1px solid #eee;
}

/* 單選按鈕樣式 */
.radio-group label {
    font-weight: normal;
    font-size: 0.9em;
}
.radio-group > div {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}
.radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.radio-group label[for] {
    cursor: pointer;
}

/* 勾選框樣式 */
.checkbox-group {
    flex-direction: row; 
    align-items: center; 
    gap: 10px; 
}
.checkbox-group label {
    font-weight: normal; 
    cursor: pointer;
}
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 所有控制項 100% 寬度 */
.button,
#color-select,
#card-type-select,
#faction-select,
#affiliation-select, /* !! 關鍵改動：新增 ID !! */
#life-number-select,
#cost-select,
#support-range-select,
#support-value-select,
#power-select,
#card-name-input,
#faction-input, /* !! 關鍵改動：新增 ID !! */
#card-id-input, /* !! 新增 ID !! */
input[type="range"] {
    width: 100%;
    box-sizing: border-box; 
}

/* 按鈕樣式 */
.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    text-align: center;
}
.button:hover {
    background-color: #0056b3;
}
.button-download {
    background-color: #28a745; 
    margin-top: auto; 
}
.button-download:hover {
    background-color: #218838;
}

#image-upload { display: none; }

/* 輸入框樣式 */
#card-name-input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

#faction-input { /* !! 關鍵改動：新增 ID !! */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}
#card-id-input { /* !! 關鍵改動：新增 ID !! */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

/* 下拉選單樣式 */
#color-select,
#card-type-select,
#faction-select,
#affiliation-select, /* !! 關鍵改動：新增 ID !! */
#life-number-select,
#cost-select,
#support-range-select,
#support-value-select,
#power-select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}