/* 顏色變量：維持專業的深色配置 */
:root {
    --dark-bg: #1e1e1e;       /* 主要深色背景 */
    --text-light: #cccccc;    /* 一般文字顏色 */
    --text-highlight: #f8f8f2; /* 標題/重點文字顏色 */
    --primary-color: #007acc; /* 主要操作色 (專業藍) */
    --success-color: #4CAF50; /* 成功/正確 (綠色) */
    --error-color: #e65252;   /* 錯誤/危險 (紅色) */
    --warning-color: #ffc107; /* 新增: 計時器警告 (黃色) */
    --critical-color: #ff9800; /* 新增: 計時器危急 (橘色) */
    --input-bg: #2d2d30;      /* 輸入框/區塊背景 */
}

/* 應用於 body (iframe 內部) */
body {
    font-family: Arial, sans-serif;
    margin: 20px; 
    background-color: var(--dark-bg); 
    color: var(--text-light); 
    
    /* 內容保護：禁用文字選取/拖曳 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* 標題與問題容器 (維持原始靠左堆疊) */
.question-container {
    margin-bottom: 20px;
}

h1 {
    color: var(--text-highlight);
    font-size: 1.5em;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#question, #prompt {
    font-size: 1.1em;
    color: var(--text-highlight);
    font-weight: bold;
    line-height: 1.5;
}

/* 計時器樣式 */
.timer-container {
    margin: 15px 0;
    text-align: right;
}

.timer {
    font-size: 1.6em;
    /* 已移除 'color: var(--error-color);'，讓顏色完全由 JS 控制 */
    font-weight: bold;
    text-align: left; 
    margin-bottom: 15px;
}

/* 表單容器 */
#responseForm {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

#responseForm label {
    margin-right: 10px;
}

/* 輸入框樣式 */
input[type="number"] {
    padding: 8px; 
    font-size: 1em;
    box-sizing: border-box; 
    border: 1px solid #444;
    border-radius: 3px; 
    background-color: var(--input-bg);
    color: var(--text-highlight);
    display: inline-block; 
    margin-right: 5px;
    width: 150px; 
}

/* 按鈕基底樣式 */
button {
    padding: 8px 15px; 
    font-size: 1em;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    transition: background-color 0.2s;
}

/* 提交按鈕：主要操作色 */
button[type="submit"] {
    background-color: var(--primary-color);
    color: var(--text-highlight);
}

button[type="submit"]:hover {
    background-color: #005f99;
}

/* 重新出題按鈕：中性色 */
#newQuestionBtn {
    background-color: #555;
    color: var(--text-highlight);
    margin-top: 15px;
}

#newQuestionBtn:hover {
    background-color: #777;
}

/* 結果顯示區 */
.result {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    line-height: 1.8;
}

/* 連結與參考來源樣式 */
.programby {
    display: block; 
    font-size: 0.8em;
    color: var(--text-light);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px; 
}

/* **修正點：將 @thunderx2012 顏色從主題藍改為低調灰** */
.programby a {
    color: #999999; /* 低調灰階顏色 */
    text-decoration: none;
    transition: color 0.2s;
}

.programby a:hover {
    color: var(--primary-color); /* Hover 時使用主題色 */
    text-decoration: underline;
}

.reference {
    font-size: 0.8em;
    color: #777777;
    text-align: center;
}

/* **新增：行動裝置優化 (響應式修正)** */
@media (max-width: 640px) {
    /* 讓表單在小螢幕上垂直堆疊 */
    #responseForm {
        flex-direction: column;
        align-items: stretch; /* 讓子元素填充水平空間 */
    }

    #responseForm label {
        text-align: center; 
        margin-bottom: 5px;
    }

    input[type="number"] {
        max-width: 100%; /* 輸入框佔滿可用寬度 */
        width: 100%; /* 確保在垂直堆疊中佔滿 */
    }

    button[type="submit"] {
        width: 100%; /* 提交按鈕佔滿可用寬度 */
        margin-top: 5px; 
    }

    #newQuestionBtn {
        width: 100%; /* 重新出題按鈕也佔滿可用寬度 */
        margin-left: 0;
        margin-right: 0;
    }
}