/**
 * =======================================
 * 自訂樣式檔案 - 完整版本
 * 
 * 此檔案合併了自訂實作和Monogatari範本結構
 * 主要包含：
 * - 主選單背景設定（已實作）
 * - 動態標題系統（已實作）
 * - 完整的範本結構（待實作）
 * - 響應式設計調整（已實作）
 * 
 * 修改時請注意：
 * 1. 保持與引擎核心樣式的兼容性
 * 2. 測試不同螢幕尺寸的顯示效果
 * 3. 確保所有動畫效果的性能表現
 * =======================================
 **/

/**
 * ===========================
 * General Styling
 * ===========================
**/

/* General Style */
body {
    /* 可在此添加全域body樣式 */
}

/* Simple Button styles */
button {
    /* 可在此添加一般按鈕樣式 */
}

/* Simple Button Style on Hover */
button:hover {
    /* 可在此添加一般按鈕hover樣式 */
}

/* General Styling for Menu Screens */
[data-screen] {
    /* 可在此添加所有畫面的通用樣式 */
}

/* ========================================
   主選單背景設定（已實作）
   ======================================== */
main-screen {
    background-image: url('../assets/scenes/mission_briefing.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 確保主選單按鈕保持在右下角的原始位置，移除透明效果 */
main-screen main-menu {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 強制移除主選單按鈕的透明效果 */
main-screen main-menu button {
    background-color: var(--main-color) !important;
    opacity: 1 !important;
}

main-screen main-menu button:hover {
    background-color: var(--main-color) !important;
    opacity: 1 !important;
}

/* 針對具體的主選單按鈕 */
main-menu button[data-action="start"],
main-menu button[data-action="open-screen"],
main-menu button[data-open="load"],
main-menu button[data-open="settings"] {
    background-color: rgba(0, 0, 0, 0.7) !important;
    opacity: 1 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

main-menu button[data-action="start"]:hover,
main-menu button[data-action="open-screen"]:hover,
main-menu button[data-open="load"]:hover,
main-menu button[data-open="settings"]:hover {
    background-color: rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
    color: #ffffff !important;
}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-screen="main"] {
    /* 可在此添加主選單畫面樣式 */
}

/* Main Menu Buttons Styling */
[data-screen="main"] button {
    /* 可在此添加主選單按鈕樣式 */
}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

/* Slots Style */
[data-component="save-slot"] figure {
    /* 可在此添加存檔槽樣式 */
}

/* Slot's Image Style */
[data-component="save-slot"] img {
    /* 可在此添加存檔槽圖片樣式 */
}

/* Slots Title Style */
[data-component="save-slot"] figcaption {
    /* 可在此添加存檔槽標題樣式 */
}

/* Slots Delete Button Style */
[data-component="save-slot"] button {
    /* 可在此添加存檔槽刪除按鈕樣式 */
}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-component="choice-container"] button {
    /* 可在此添加選擇按鈕樣式 */
}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {
    /* 可在此添加選擇按鈕hover樣式 */
}

/* Text Box styling */
[data-component="text-box"] {
    /* 可在此添加對話框樣式 */
}

/* Character Name Style */
[data-ui="who"] {
    /* 可在此添加角色名稱樣式 */
}

/* Style for Centered Text */
[data-component="centered-dialog"] {
    /* 可在此添加置中對話樣式 */
}

/* Character Images Styles */
[data-screen="game"] [data-character] {
    /* 可在此添加角色圖片樣式 */
}

/* Other Images Styles */
[data-screen="game"] [data-image] {
    /* 可在此添加其他圖片樣式 */
}

/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* 強制移除快捷選單的透明效果（已實作） */
quick-menu {
    background-color: var(--main-color) !important;
    opacity: 1 !important;
}

quick-menu button {
    background-color: var(--main-color) !important;
    opacity: 1 !important;
    color: #ffffff !important;
}

quick-menu button:hover,
quick-menu button:focus {
    background-color: var(--main-color) !important;
    opacity: 1 !important;
    color: #ffffff !important;
}

/* 如果是右上角的快捷選單透明，也一併修正 */
[data-component="quick-menu"] {
    background-color: var(--main-color) !important;
    opacity: 1 !important;
}

[data-component="quick-menu"] button {
    background-color: var(--main-color) !important;
    opacity: 1 !important;
    color: #ffffff !important;
}

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Buttons Style */
[data-component="quick-menu"] span {
    /* 可在此添加快捷選單按鈕樣式 */
}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] span:hover {
    /* 可在此添加快捷選單按鈕hover樣式 */
}

/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"] > span > .fa {
    /* 可在此添加快捷選單圖示樣式 */
}

/* ========================================
   動態標題系統（已實作）
   ======================================== */

/* 動態標題容器 - 置中顯示遊戲標題和描述 */
.dynamic-title-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 主標題樣式 - 簡潔高品質版本 */
.dynamic-main-title {
    font-size: 5rem;
    font-weight: 900;
    margin: 0;
    color: #ffffff;
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(255, 255, 255, 0.3);
    font-family: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
    letter-spacing: 0.1em;
    animation: titleSlideIn 1.2s ease-out;
}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these */
input[type=range]:focus::-webkit-slider-runnable-track {
    /* 可在此添加WebKit滑桿focus樣式 */
}

input[type=range]::-webkit-slider-runnable-track {
    /* 可在此添加WebKit滑桿樣式 */
}

input[type=range]:focus::-ms-fill-upper {
    /* 可在此添加IE滑桿上半部focus樣式 */
}

input[type=range]:focus::-ms-fill-lower {
    /* 可在此添加IE滑桿下半部focus樣式 */
}

input[type=range]::-moz-range-track {
    /* 可在此添加Firefox滑桿樣式 */
}

input[type=range]::-ms-fill-lower {
    /* 可在此添加IE滑桿下半部樣式 */
}

input[type=range]::-ms-fill-upper {
    /* 可在此添加IE滑桿上半部樣式 */
}

/* ========================================
   動畫關鍵幀定義（已實作）
   ======================================== */

/* 標題入場滑動動畫 - 簡潔版本 */
@keyframes titleSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   響應式設計（合併已實作與範本）
   適應不同螢幕尺寸的顯示效果
   ======================================== */

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
    /* Styles for the desktop version of the Quick Menu */

    /* Quick Menu Style */
    [data-component="quick-menu"] {
        /* 可在此添加桌面版快捷選單樣式 */
    }

    /* Quick Menu Buttons Style */
    [data-component="quick-menu"] span {
        /* 可在此添加桌面版快捷選單按鈕樣式 */
    }

    /* Quick Menu Buttons Style on Hover */
    [data-component="quick-menu"] span:hover {
        /* 可在此添加桌面版快捷選單按鈕hover樣式 */
    }
}

/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {
    /* 可在此添加平板樣式 */
}

/* 平板尺寸調整（已實作） */
@media screen and (max-width: 768px) {
    .dynamic-main-title {
        font-size: 3.5rem;
    }
}

/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {
    /* 可在此添加HD螢幕樣式 */
}

/* 手機尺寸調整（已實作） */
@media screen and (max-width: 480px) {
    .dynamic-main-title {
        font-size: 2.5rem;
    }
}

/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {
    /* 可在此添加Full HD螢幕樣式 */
}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {
    /* 可在此添加Retina螢幕樣式 */
}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {
    /* 可在此添加4K螢幕樣式 */
}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {
    /* 可在此添加5K螢幕樣式 */
}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {
    /* 可在此添加8K螢幕樣式 */
}

/* ========================================
   版本資訊與維護記錄
   
   v1.1.0 - 合併版本
   - 保留原有的主選單背景設定
   - 保留原有的動態標題系統
   - 整合Monogatari完整範本結構
   - 保留原有的響應式設計支援
   - 添加完整的CSS範本架構以供未來擴展
   
   v1.0.0 - 初始版本
   - 基本背景圖片設定
   - 動態標題系統實作
   - 響應式設計支援
   
   後續版本更新請在此記錄修改內容
   ======================================== */