:root {
    /* 顏色定義 */
    --background-color: #0d1117; /* 深藍色/黑色背景 */
    --text-color: #ffffff;      /* 白色文字 */
    --primary-color: #4CAF50;   /* 主要綠色 */
    --secondary-color: #FFC107; /* 次要黃色 (得分) */
    --key-default: #21262d;     /* 鍵盤預設色 */
    --key-hover: #30363d;       /* 鍵盤懸停色 */
    --key-active: #4CC9F0;      /* 按鍵高亮/目標色 (亮青色) */
    --ship-color: #4CC9F0;      /* 飛船顏色 */
    --danger-color: #F44336;    /* 危險紅色 */
    --warning-color: #FFEB3B;   /* 警告黃色 */

    /* 邊緣陰影 */
    --glow-light: 0 0 5px rgba(76, 201, 240, 0.7);
    --glow-danger: 0 0 10px rgba(244, 67, 54, 0.7);

    /* 指法顏色 */
    --finger-L4: #8E44AD; /* 左小指 */
    --finger-L3: #3498DB; /* 左環指 */
    --finger-L2: #2ECC71; /* 左中指 */
    --finger-L1: #E74C3C; /* 左食指 */
    --finger-R1: #E67E22; /* 右食指 */
    --finger-R2: #F1C40F; /* 右中指 */
    --finger-R3: #9B59B6; /* 右環指 */
    --finger-R4: #1ABC9C; /* 右小指 */
}

/* 整個頁面和容器 */
body {
    margin: 0;
    font-family: '微軟正黑體', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; 
    font-size: 16px;
}

#container {
    width: 100%;
    max-width: 768px; /* 模擬平板寬度限制 */
    height: 100vh;
    max-height: 1024px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--background-color);
}

/* --- 模式選擇介面 --- */
#mode-selector {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 50px;
    text-align: center;
}

#mode-selector h1 {
    font-size: 2.5em;
    color: var(--primary-color);
    text-shadow: var(--glow-light);
}

.mode-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 350px;
}

.mode-buttons button {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.mode-buttons button:hover {
    background-color: #66BB6A;
}
.mode-buttons button:active {
    transform: scale(0.98);
}
.mode-desc {
    font-size: 0.7em;
    font-weight: normal;
    opacity: 0.8;
}

.level-selector label {
    font-size: 1.1em;
    margin-right: 10px;
}

.level-selector select {
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    background-color: var(--key-default);
    color: var(--text-color);
    font-size: 1em;
    margin-top: 10px;
}


/* --- 遊戲主介面 --- */
#game-container {
    /* 預設隱藏，由 JS 控制顯示，因為 index.html 中已設定 display: none; */
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* 頂部 HUD (得分和模式顯示) */
.game-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #161b22;
    border-bottom: 1px solid #30363d;
    font-size: 1.1em;
}

.game-hud span {
    font-weight: bold;
}

#score-display {
    color: var(--secondary-color);
    text-shadow: var(--glow-light);
}

/* 返回按鈕 */
#back-to-mode {
    background: none;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#back-to-mode:hover {
    background-color: rgba(255, 193, 7, 0.2);
}

/* 遊戲區 */
#game-area {
    position: relative;
    flex-grow: 1; 
    width: 100%;
    overflow: hidden;
    background-color: #0d1117;
}

/* 玩家飛船 */
#player-ship {
    position: absolute;
    bottom: 0px; 
    width: 50px;
    height: 50px;
    background: transparent;
    font-size: 3em;
    line-height: 50px;
    text-align: center;
    transition: left 0.1s ease-out; 
    transform: translateX(-50%);
    color: var(--ship-color);
    text-shadow: 0 0 10px var(--ship-color);
    z-index: 5;
}

/* 敵人 (落字方塊) */
.enemy {
    position: absolute;
    width: auto;
    min-width: 50px;
    height: 50px;
    background-color: var(--key-default);
    color: var(--text-color);
    border: 2px solid var(--danger-color);
    border-radius: 8px;
    text-align: center;
    padding: 5px;
    line-height: 1.2;
    font-size: 1.2em;
    font-weight: bold;
    box-shadow: var(--glow-danger);
    z-index: 10;
    white-space: nowrap; 
}

/* 敵人下方的提示字 */
.enemy-hint {
    font-size: 0.7em;
    font-weight: normal;
    color: var(--secondary-color);
    display: block;
    margin-top: -5px;
}

/* 爆炸效果 */
.explosion {
    position: absolute;
    font-size: 3em;
    pointer-events: none;
    animation: fadeOut 0.5s ease-out forwards;
    z-index: 20;
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(2); }
}

/* --- 鍵盤 HUD 介面 --- */
#keyboard-hud {
    position: relative;
    width: 100%;
    padding: 10px 0;
    background-color: #161b22;
    border-top: 1px solid #30363d;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 8px; /* 按鍵間距 */
    margin-bottom: 8px;
}

/* 模擬鍵盤行偏移 */
.kb-row-offset-1 {
    padding-left: 20px; 
}

.kb-row-offset-2 {
    padding-left: 40px; 
}

.key {
    width: 55px; /* 標準鍵寬 */
    height: 55px;
    background-color: var(--key-default);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    cursor: default;
    transition: background-color 0.05s;
    user-select: none;
    border: 1px solid #30363d;
}

.key .key-main {
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1;
}

.key .key-sub {
    font-size: 0.8em;
    opacity: 0.7;
}

/* 鍵盤高亮效果 (目標鍵) */
.key.active {
    background-color: var(--key-active);
    color: var(--background-color);
    box-shadow: var(--glow-light);
    transform: translateY(-2px); 
}

/* --- 懸浮手指提示 --- */
#floating-finger {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: red; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--background-color);
    opacity: 0.9;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 100;
    pointer-events: none;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* 指法顏色應用 */
.finger-L4 { background-color: var(--finger-L4); }
.finger-L3 { background-color: var(--finger-L3); }
.finger-L2 { background-color: var(--finger-L2); }
.finger-L1 { background-color: var(--finger-L1); }
.finger-R1 { background-color: var(--finger-R1); }
.finger-R2 { background-color: var(--finger-R2); }
.finger-R3 { background-color: var(--finger-R3); }
.finger-R4 { background-color: var(--finger-R4); }


/* --- 模式視覺化：英文/中文進度 --- */

/* 已完成的部分 */
.enemy .completed {
    color: var(--ship-color); 
    opacity: 0.8;
    text-shadow: var(--glow-light);
}

/* 尚未開始的部分 */
.enemy .remaining {
    color: var(--text-color); 
}

/* 中文模式：當前正在輸入的注音/字母 (高亮) */
.enemy .highlight {
    color: var(--key-active); 
    font-weight: bold;
    text-shadow: 0 0 5px var(--key-active);
}

/* 中文模式：當前正在輸入的字 (稍微變大或區分) */
.enemy .current-word {
    font-size: 1.1em;
    color: var(--secondary-color);
}