/* ============================================================
   基礎全螢幕重設與字體定義
   ============================================================ */
body, html, #game-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    /* 確保全域套用清晰、支援各平台的黑正體 */
    font-family: 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', sans-serif;
    /* 防止手機端長按意外選取到文字或彈出選單 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* 移除手機點擊時的預設高亮外框 */
}

/* ============================================================
   開頭影片（Intro Screen）置頂與過渡
   ============================================================ */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 999999; 
    display: flex; 
    justify-content: center;
    align-items: center;
}

#intro-screen[style*="display: none"], 
#intro-screen[style*="display:none"] {
    display: none !important;
}

#intro-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
   問題彈出遮罩層（核心響應式佈局）
   ============================================================ */
.question-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.55); /* 稍微調高透明度，凸顯題目 */
    z-index: 1000; 
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 題目在上，選項在下/中，留出空間 */
    align-items: center;
    padding: 5vh 4vw; /* 使用視窗百分比作為內邊距，適配各類手機長度 */
    box-sizing: border-box;
}

/* 題目文字框：確保在螢幕正中間上方 */
.question-text-box {
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 620px;
    text-align: center;
    color: #111;
    /* 使用 clamp 讓字體在手機端自動縮小，在桌機端放大，永遠不超出外框 */
    font-size: clamp(16px, 4.5vw, 24px); 
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-top: 2vh;
}

/* 選項按鈕容器：確保選項固定在螢幕左右兩側 */
.answer-balls {
    display: flex;
    justify-content: space-between; /* 強制分居最左與最右 */
    align-items: center;
    width: 100%;
    max-width: 850px; /* 限制桌機端最大跨度，避免分得太開 */
    margin-top: auto;
    margin-bottom: auto; /* 在剩餘的垂直空間中居中 */
    padding: 0 2vw;
    box-sizing: border-box;
}

/* ============================================================
   圓形選項按鈕與內部元素響應式縮放
   ============================================================ */
.answer-ball {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center;    

    /* 關鍵：使用百分比寬度配合 clamp。手機端最大不超過 36vw，兩顆加起來 72vw，
       保證螢幕中央永遠有至少 28% 的透明空間可以看見爬梯動畫，且絕對不重疊！ */
    width: clamp(120px, 36vw, 300px);
    height: clamp(120px, 36vw, 300px);
    
    background-color: #ff4d4d; 
    border: 3px solid #fff; /* 白色邊框增加手機上的辨識度 */
    border-radius: 50%;       
    color: white;             
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4); 
    transition: transform 0.15s, background-color 0.15s;
    
    /* 內部安全間距同樣採用動態縮放 */
    padding: clamp(10px, 2.5vw, 22px);            
    box-sizing: border-box;   
    overflow: hidden;         
}

/* 手機與電腦端的互動動效 */
.answer-ball:hover {
    background-color: #ff3333;
}

.answer-ball:active {
    transform: scale(0.92); /* 按下時縮小，提供強烈點擊反饋 */
}

/* 選項內圖片：自動適應圓形大小 */
.option-img {
    /* 限制圖片最大高度，手機上變小，留出充足空間給文字 */
    max-height: 75%; 
    height:70%;
    width: auto;
    max-width: 90%; /* 確保圖片不會太寬，保持圓形按鈕的美觀 */       
    display: block;
    margin: 0 auto 2% auto; 
    border-radius: 6px;       
    object-fit: contain;      
}

/* 選項內部的文字 */
.answer-ball span {
    /* 字體流體縮放，確保最後一題的長文本在小手機（如 iPhone SE）上也能完整呈現 */
    font-size: clamp(16.5px, 4.2vw, 22px) !important; 
    line-height: 1.15;         
    font-weight: bold;         
    text-align: center;       
    width: 100%;              
    display: block;
    word-wrap: break-word;    
}

/* ============================================================
   其他 UI 元素（提示框、結果面板）響應式優化
   ============================================================ */
.overlay-prompt {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: clamp(16px, 4vw, 20px);
    pointer-events: none;
    z-index: 500;
    transition: opacity 0.5s ease;
    width: max-content;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 15px;
    box-sizing: border-box;
}

.modal-content the-result,
.modal-content.result {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
}

.modal-content h2 {
    font-size: clamp(20px, 5vw, 24px);
    margin-top: 0;
}

.modal-content p {
    font-size: clamp(14px, 3.5vw, 16px);
}

.restart-btn {
    margin-top: 15px;
    padding: 12px 28px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: clamp(16px, 4vw, 18px);
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    width: 100%; /* 手機上按鈕變寬，更容易點擊 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.restart-btn:hover {
    background-color: #45a049;
}


#bgmBtn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999; /* 確保高於遊戲圖層 */
    padding: 10px 15px;
    background-color: rgba(0, 123, 255, 0.8);
    color: white;
    border: none;
    border-radius: 50%; /* 圓形按鈕更適合手機 */
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 600px) {
    #bgmBtn {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}