/* 1. 引入字型 */
@font-face {
    font-family: 'Cubic11';
    src: url('https://www.smsh.ntpc.edu.tw/var/file/0/1000/img/142/Cubic_11.woff2') format('woff2');
}

/* 2. 整體佈局設定 */
.mc-layout-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    font-family: 'Cubic11', sans-serif;
}

/* 3. 麥塊視窗風格 */
.mc-window {
    background: #C6C6C6;
    border: 4px solid #000;
    /* 修正：分開寫入多重陰影，確保解析正確 */
    box-shadow: inset -4px -4px 0px #555555, 
                inset 4px 4px 0px #FFFFFF;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    position: relative;
    text-align: center;
}

/* 4. 標題漂浮動畫 */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.mc-title-fancy {
    color: #FFFF55;
    text-shadow: 3px 3px 0px #3F3F00;
    font-size: 2rem;
    margin: 15px 0;
}

.mc-subtitle {
    color: #333333;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* 5. 按鈕基礎設定 */
.mc-btn {
    display: block;
    text-decoration: none;
    position: relative;
    margin: 15px 5px;
    padding: 15px;
    border: 3px solid #000;
    transition: all 0.1s;
    cursor: pointer;
}

.mc-btn:active {
    transform: scale(0.98);
    box-shadow: inset 4px 4px 0px #333333;
}

/* 6. 綠色按鈕 (草地) */
.mc-btn-green {
    background: #55AA33;
    box-shadow: inset -4px -4px 0px #336622, 
                inset 4px 4px 0px #77CC44;
}

.mc-btn-green:hover {
    background: #66BB44;
    transform: scale(1.02);
}

/* 泥土風格按鈕 */
.mc-btn-dirt {
    background: #795548; /* 經典泥土 */
    /* 上左亮面(淺褐)，下右暗面(深土) */
    box-shadow: inset -4px -4px 0px #3E2723, 
                inset 4px 4px 0px #A1887F; 
    border: 3px solid #281912; /* 超深咖啡色邊框 */
}

.mc-btn-dirt:hover {
    background: #8D6E63; /* 滑鼠移上去變亮一點 */
    transform: scale(1.02);
}

.mc-btn-dirt:active {
    transform: scale(0.98);
    box-shadow: inset 4px 4px 0px #3E2723; /* 點擊時陰影反轉 */
}


/* 7. 灰色按鈕 (石磚) */
.mc-btn-gray {
    background: #777777;
    box-shadow: inset -4px -4px 0px #444444, 
                inset 4px 4px 0px #AAAAAA;
}

.mc-btn-gray:hover {
    background: #888888;
    transform: scale(1.02);
}

/* 8. 文字與其他元件 */
.btn-text {
    color: white;
    text-shadow: 2px 2px 0px #333333;
    font-size: 1.1rem;
}

.mc-divider {
    height: 4px;
    background: #555555;
    border-bottom: 4px solid #FFFFFF;
    margin: 20px 0;
}

.sub-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* 增加按鈕間距 */
}

.mc-footer-note {
    margin-top: 20px;
    color: #888888;
    font-size: 0.7rem;
}

.mc-layout-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* 或是 100vh 讓它佔滿全螢幕 */
    font-family: 'Cubic11', sans-serif;
    
    /* 加入背景圖設定 */
    background-image: url('https://www.smsh.ntpc.edu.tw/var/file/0/1000/img/142/bg.jpg'); /* 記得把剛才的圖上傳後取得連結 */
    background-size: cover;       /* 讓圖片充滿整個畫面 */
    background-position: center;  /* 圖片置中 */
    background-repeat: no-repeat; /* 不要重複排列 */
    
    /* 建議：加一點暗色遮罩，讓文字視窗更清楚 */
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.2); 
}

/* 新增這一段：確保瀏覽器預設的白邊被移除 */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 防止水平卷軸出現 */
}

/* =========================================
   無障礙友善設定 (A11y Patches)
   ========================================= */

/* 1. 隱藏但在螢幕閱讀器中可讀的「跳到主要內容」連結 */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 9999;
    transition: top 0.3s;
}
/* 當按下 Tab 鍵選取到時，會跑出來 */
.skip-link:focus {
    top: 0;
}

/* 2. 強顯著的鍵盤聚焦狀態 (Focus Indicator) */
/* 這是無障礙檢測最常不過的地方：用 Tab 鍵移動時要有明顯框線 */
a:focus, button:focus {
    outline: 4px solid #FFFF00 !important; /* 高對比黃色 */
    outline-offset: 2px;
    box-shadow: 0 0 10px #000;
}

/* 3. 尊重「減少動態效果」的使用者 (避免 3D 暈/癲癇) */
/* 如果使用者的系統設定了「減少動畫」，網頁就會自動停止漂浮 */
@media (prefers-reduced-motion: reduce) {
    .floating, .mc-btn, .mc-btn:hover {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}