/* 現代化學生證門禁系統樣式 */

/* 重置瀏覽器預設樣式 */
* {
    margin: 0; /* 移除所有元素的外邊距 */
    padding: 0; /* 移除所有元素的內邊距 */
    box-sizing: border-box; /* 設定盒模型為 border-box */
}

/* 設定 body 樣式 - 現代化漸層背景 */
body {
    font-family: 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* 現代字型 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 現代漸層紫藍色背景 */
    min-height: 100vh; /* 最小高度為視窗高度 */
    display: flex; /* 使用 flexbox 佈局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    overflow-x: hidden; /* 隱藏水平溢出 */
    position: relative; /* 相對定位 */
}

/* 添加動態背景裝飾 */
body::before {
    content: ''; /* 空內容 */
    position: absolute; /* 絕對定位 */
    top: -50%; /* 頂部位置 */
    left: -50%; /* 左側位置 */
    width: 200%; /* 寬度 */
    height: 200%; /* 高度 */
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); /* 點狀圖案 */
    background-size: 50px 50px; /* 背景尺寸 */
    animation: float 20s ease-in-out infinite; /* 浮動動畫 */
    z-index: -1; /* 置於背景 */
}

/* 浮動動畫 */
@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* 主容器樣式 */
.container {
    width: 95%; /* 寬度 */
    max-width: 1400px; /* 最大寬度 */
    margin: 0 auto; /* 水平居中 */
    text-align: center; /* 文字居中對齊 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    background: rgba(255, 255, 255, 0.05); /* 半透明白色背景 */
    border-radius: 30px; /* 大圓角 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 玻璃效果邊框 */
    padding: 40px; /* 內邊距 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* 深度陰影 */
}

/* 頁面標題樣式 - 現代化設計 */
.page-title {
    font-size: 3.5rem; /* 大字體 */
    font-weight: 700; /* 粗體 */
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); /* 漸層文字 */
    -webkit-background-clip: text; /* 文字剪裁 */
    -webkit-text-fill-color: transparent; /* 透明填充 */
    background-clip: text; /* 文字剪裁 */
    margin-bottom: 60px; /* 下方邊距 */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 文字陰影 */
    letter-spacing: -0.02em; /* 字母間距 */
}

/* 場景容器樣式 - 現代卡片設計 */
.scene-container {
    position: relative; /* 相對定位 */
    width: 100%; /* 寬度 100% */
    height: 500px; /* 高度 */
    background: rgba(255, 255, 255, 0.08); /* 半透明背景 */
    border-radius: 25px; /* 圓角 */
    overflow: visible; /* 顯示溢出內容 */
    backdrop-filter: blur(20px); /* 背景模糊 */
    border: 1px solid rgba(255, 255, 255, 0.15); /* 玻璃邊框 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* 陰影 */
}

/* 現代化大樓設計 */
.building {
    position: absolute; /* 絕對定位 */
    width: 400px; /* 寬度 */
    height: 450px; /* 高度 */
    background: linear-gradient(145deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%); /* 現代深色漸層 */
    bottom: 0; /* 貼底 */
    left: 20%; /* 位置 */
    transform: translateX(-50%); /* 居中調整 */
    border-radius: 25px 25px 0 0; /* 上方大圓角 */
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 多層陰影效果 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 細邊框 */
    overflow: hidden; /* 隱藏溢出 */
}

/* 大樓頂部裝飾 */
.building::before {
    content: ''; /* 空內容 */
    position: absolute; /* 絕對定位 */
    top: 0; /* 頂部 */
    left: 0; /* 左側 */
    right: 0; /* 右側 */
    height: 3px; /* 高度 */
    background: linear-gradient(90deg, #3498db 0%, #2ecc71 50%, #3498db 100%); /* 彩色頂部線 */
}

/* 大樓名稱樣式 - 現代化標籤 */
.building-name {
    position: absolute; /* 絕對定位 */
    top: 30px; /* 距離頂部 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 居中調整 */
    background: rgba(255, 255, 255, 0.95); /* 半透明白色 */
    backdrop-filter: blur(10px); /* 背景模糊 */
    padding: 15px 35px; /* 內邊距 */
    border-radius: 25px; /* 圓角 */
    font-size: 1.4rem; /* 字體大小 */
    font-weight: 600; /* 字重 */
    color: #2c3e50; /* 深色文字 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* 陰影 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 邊框 */
    white-space: nowrap; /* 不換行 */
    letter-spacing: 0.5px; /* 字母間距 */
}

/* 現代化窗戶容器 */
.windows {
    display: flex; /* flexbox 佈局 */
    justify-content: space-evenly; /* 平均分布 */
    padding: 120px 40px 30px; /* 內邊距 */
    gap: 15px; /* 間距 */
}

/* 現代化窗戶設計 */
.window {
    width: 85px; /* 寬度 */
    height: 100px; /* 高度 */
    background: linear-gradient(145deg, #3498db 0%, #2980b9 100%); /* 藍色漸層 */
    border-radius: 12px; /* 圓角 */
    position: relative; /* 相對定位 */
    box-shadow: 
        0 8px 20px rgba(52, 152, 219, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2); /* 發光陰影 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 邊框 */
    overflow: hidden; /* 隱藏溢出 */
}

/* 窗戶發光效果 */
.window::before {
    content: ''; /* 空內容 */
    position: absolute; /* 絕對定位 */
    top: -50%; /* 頂部 */
    left: -50%; /* 左側 */
    width: 200%; /* 寬度 */
    height: 200%; /* 高度 */
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); /* 光澤效果 */
    animation: shimmer 3s ease-in-out infinite; /* 閃爍動畫 */
}

/* 閃爍動畫 */
@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

/* 窗戶十字分割線 */
.window::after {
    content: ''; /* 空內容 */
    position: absolute; /* 絕對定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    width: 80%; /* 寬度 */
    height: 80%; /* 高度 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 分割線 */
    border-radius: 6px; /* 圓角 */
    transform: translate(-50%, -50%); /* 居中 */
}

/* 現代化入口設計 */
.entrance {
    position: absolute; /* 絕對定位 */
    bottom: 0; /* 貼底 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 居中調整 */
    width: 160px; /* 寬度 */
    height: 200px; /* 高度 */
    background: linear-gradient(180deg, #1a252f 0%, #2c3e50 100%); /* 深色漸層 */
    border-radius: 80px 80px 0 0; /* 拱門形狀 */
    overflow: hidden; /* 隱藏溢出 */
    box-shadow: 
        inset 0 5px 15px rgba(0, 0, 0, 0.3),
        0 10px 25px rgba(0, 0, 0, 0.2); /* 內外陰影 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 邊框 */
}

/* 現代化門設計 */
.door {
    position: absolute; /* 絕對定位 */
    width: 50%; /* 寬度 */
    height: 100%; /* 高度 */
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #8B4513 100%); /* 木質漸層 */
    top: 0; /* 頂部對齊 */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑動畫 */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2); /* 內陰影 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 邊框 */
}

/* 門的左右側樣式 */
.door-left {
    left: 0; /* 左側 */
    border-right: 2px solid rgba(0, 0, 0, 0.2); /* 右邊框 */
}

.door-right {
    right: 0; /* 右側 */
    border-left: 2px solid rgba(0, 0, 0, 0.2); /* 左邊框 */
}

/* 現代化門把手 */
.door-handle {
    position: absolute; /* 絕對定位 */
    width: 18px; /* 寬度 */
    height: 18px; /* 高度 */
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); /* 金色漸層 */
    border-radius: 50%; /* 圓形 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 居中 */
    box-shadow: 
        0 4px 8px rgba(243, 156, 18, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* 發光陰影 */
}

/* 開門動畫 */
.entrance.open .door-left {
    transform: translateX(-90%); /* 左門移動 */
}

.entrance.open .door-right {
    transform: translateX(90%); /* 右門移動 */
}

/* 現代化 QR Code 掃描器 */
.qr-scanner {
    position: absolute; /* 絕對定位 */
    right: 60px; /* 右側距離 */
    top: 30px; /* 頂部距離 */
    width: 400px; /* 寬度 */
    height: 400px; /* 高度 */
    background: rgba(0, 0, 0, 0.8); /* 深色半透明背景 */
    backdrop-filter: blur(20px); /* 背景模糊 */
    border-radius: 30px; /* 大圓角 */
    padding: 40px; /* 內邊距 */
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 多層陰影 */
    border: 2px solid rgba(220, 53, 69, 0.8); /* 紅色邊框 */
    z-index: 10; /* 層級 */
    transition: all 0.3s ease; /* 平滑過渡 */
}

/* 掃描器懸停效果 */
.qr-scanner:hover {
    transform: translateY(-5px); /* 懸浮效果 */
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15); /* 增強陰影 */
}

/* 現代化掃描器標題 */
.scanner-title {
    color: rgba(255, 255, 255, 0.95); /* 白色文字 */
    font-size: 1.6rem; /* 字體大小 */
    font-weight: 600; /* 字重 */
    margin-bottom: 35px; /* 下方邊距 */
    text-align: center; /* 居中 */
    letter-spacing: 0.5px; /* 字母間距 */
}

/* 現代化 QR Code 顯示區域 */
.qr-code {
    width: 280px; /* 寬度 */
    height: 280px; /* 高度 */
    background: rgba(255, 255, 255, 0.98); /* 白色背景 */
    margin: 0 auto 40px; /* 居中和下邊距 */
    border-radius: 20px; /* 圓角 */
    position: relative; /* 相對定位 */
    padding: 15px; /* 內邊距 */
    display: flex; /* flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8); /* 內外陰影 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 細邊框 */
}

/* QR Code 圖片樣式 */
.qr-code img {
    width: 100%; /* 寬度 */
    height: 100%; /* 高度 */
    object-fit: contain; /* 保持比例 */
    border-radius: 10px; /* 圓角 */
}

/* 現代化狀態指示燈 */
.scanner-status {
    width: 50px; /* 寬度 */
    height: 50px; /* 高度 */
    border-radius: 50%; /* 圓形 */
    margin: 0 auto; /* 居中 */
    position: relative; /* 相對定位 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* 陰影 */
}

/* 紅色指示燈（未驗證） */
.scanner-status.red {
    background: radial-gradient(circle, #ff4757 0%, #ff3838 100%); /* 紅色漸層 */
    box-shadow: 
        0 0 20px rgba(255, 71, 87, 0.6),
        0 0 40px rgba(255, 71, 87, 0.3); /* 紅色發光 */
    animation: pulse-red-modern 2s ease-in-out infinite; /* 脈衝動畫 */
}

/* 綠色指示燈（已驗證） */
.scanner-status.green {
    background: radial-gradient(circle, #2ecc71 0%, #27ae60 100%); /* 綠色漸層 */
    box-shadow: 
        0 0 20px rgba(46, 204, 113, 0.6),
        0 0 40px rgba(46, 204, 113, 0.3); /* 綠色發光 */
    animation: pulse-green-modern 2s ease-in-out infinite; /* 脈衝動畫 */
}

/* 現代紅色脈衝動畫 */
@keyframes pulse-red-modern {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 0 20px rgba(255, 71, 87, 0.6),
            0 0 40px rgba(255, 71, 87, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 
            0 0 30px rgba(255, 71, 87, 0.8),
            0 0 60px rgba(255, 71, 87, 0.5);
    }
}

/* 現代綠色脈衝動畫 */
@keyframes pulse-green-modern {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 0 20px rgba(46, 204, 113, 0.6),
            0 0 40px rgba(46, 204, 113, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 
            0 0 30px rgba(46, 204, 113, 0.8),
            0 0 60px rgba(46, 204, 113, 0.5);
    }
}

/* 現代化學生角色 */
.student {
    position: absolute; /* 絕對定位 */
    left: 120px; /* 左側距離 */
    bottom: 60px; /* 底部距離 */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑過渡 */
    transform-origin: center bottom; /* 變換原點 */
}

/* 學生進入動畫 */
.student.entering {
    left: 280px; /* 移動位置 */
    transform: scale(1.02); /* 輕微放大 */
}

/* 現代化學生頭部 */
.student-head {
    width: 55px; /* 寬度 */
    height: 55px; /* 高度 */
    background: radial-gradient(circle at 30% 30%, #ffb3ba 0%, #ff8a95 100%); /* 立體膚色 */
    border-radius: 50%; /* 圓形 */
    margin: 0 auto 8px; /* 居中和下邊距 */
    box-shadow: 
        0 5px 15px rgba(255, 179, 186, 0.3),
        inset -2px -2px 5px rgba(0, 0, 0, 0.1); /* 立體陰影 */
    border: 2px solid rgba(255, 255, 255, 0.3); /* 邊框 */
}

/* 現代化學生身體 */
.student-body {
    width: 75px; /* 寬度 */
    height: 95px; /* 高度 */
    background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); /* 現代制服色 */
    border-radius: 20px 20px 8px 8px; /* 圓角 */
    position: relative; /* 相對定位 */
    box-shadow: 
        0 8px 20px rgba(102, 126, 234, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2); /* 立體效果 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 邊框 */
}

/* 現代化學生證 */
.student-card {
    position: absolute; /* 絕對定位 */
    right: -45px; /* 右側位置 */
    top: 40px; /* 頂部位置 */
    width: 65px; /* 寬度 */
    height: 40px; /* 高度 */
    background: rgba(255, 255, 255, 0.95); /* 白色背景 */
    backdrop-filter: blur(10px); /* 背景模糊 */
    border: 2px solid rgba(52, 152, 219, 0.8); /* 藍色邊框 */
    border-radius: 8px; /* 圓角 */
    font-size: 0.85rem; /* 字體大小 */
    font-weight: 600; /* 字重 */
    display: flex; /* flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    box-shadow: 
        0 5px 15px rgba(52, 152, 219, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8); /* 陰影效果 */
    color: #2c3e50; /* 深色文字 */
    letter-spacing: 0.3px; /* 字母間距 */
}

/* 已驗證學生證 */
.student-card.verified {
    background: rgba(46, 204, 113, 0.95); /* 綠色背景 */
    border-color: #27ae60; /* 綠色邊框 */
    color: #ffffff; /* 白色文字 */
    animation: glow-success 1s ease-in-out; /* 成功發光 */
}

/* 成功發光動畫 */
@keyframes glow-success {
    0% { box-shadow: 0 0 5px rgba(46, 204, 113, 0.3); }
    50% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.8), 0 0 30px rgba(46, 204, 113, 0.4); }
    100% { box-shadow: 0 0 5px rgba(46, 204, 113, 0.3); }
}

/* 現代化學生腿部 */
.student-legs {
    width: 75px; /* 寬度 */
    height: 55px; /* 高度 */
    background: linear-gradient(145deg, #2c3e50 0%, #34495e 100%); /* 深色褲子 */
    border-radius: 8px 8px 12px 12px; /* 圓角 */
    box-shadow: 
        0 5px 12px rgba(44, 62, 80, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 立體效果 */
}

/* 行走動畫 */
.student-legs.walking {
    animation: walk-modern 0.8s ease-in-out infinite alternate; /* 現代行走動畫 */
}

/* 現代行走動畫 */
@keyframes walk-modern {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(3px) rotate(1deg); }
}

/* 現代化狀態訊息 */
.status-message {
    margin-top: 40px; /* 上邊距 */
    padding: 25px 35px; /* 內邊距 */
    background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    backdrop-filter: blur(20px); /* 背景模糊 */
    border-radius: 20px; /* 圓角 */
    font-size: 1.2rem; /* 字體大小 */
    color: rgba(255, 255, 255, 0.9); /* 白色文字 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 邊框 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* 陰影 */
    letter-spacing: 0.3px; /* 字母間距 */
    line-height: 1.6; /* 行高 */
}

/* 成功狀態訊息 */
.status-message.success {
    background: rgba(46, 204, 113, 0.15); /* 綠色半透明背景 */
    border-color: rgba(46, 204, 113, 0.3); /* 綠色邊框 */
    color: #ffffff; /* 白色文字 */
}

/* 歡迎訊息樣式 */
.welcome-message {
    position: absolute; /* 絕對定位 */
    top: 40%; /* 垂直位置 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 居中 */
    font-size: 2.5rem; /* 大字體 */
    font-weight: 700; /* 粗體 */
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); /* 金色漸層 */
    -webkit-background-clip: text; /* 文字剪裁 */
    -webkit-text-fill-color: transparent; /* 透明填充 */
    background-clip: text; /* 文字剪裁 */
    text-shadow: 0 5px 15px rgba(243, 156, 18, 0.3); /* 陰影 */
    animation: welcome-glow 2s ease-in-out; /* 歡迎發光動畫 */
    letter-spacing: 1px; /* 字母間距 */
}

/* 歡迎發光動畫 */
@keyframes welcome-glow {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.8); 
    }
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.05); 
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1); 
    }
}

/* 響應式設計 - 大螢幕平板 */
@media (max-width: 1200px) {
    .container {
        width: 98%; /* 增加容器寬度 */
        padding: 30px; /* 減少內邊距 */
    }
    
    .page-title {
        font-size: 3rem; /* 調整標題大小 */
        margin-bottom: 40px; /* 減少下邊距 */
    }
    
    .scene-container {
        height: 450px; /* 調整場景高度 */
    }
    
    .qr-scanner {
        right: 30px; /* 調整右側距離 */
        width: 350px; /* 縮小寬度 */
        height: 350px; /* 縮小高度 */
        padding: 30px; /* 減少內邊距 */
    }
    
    .qr-code {
        width: 240px; /* 調整 QR Code 大小 */
        height: 240px; /* 調整 QR Code 大小 */
    }
    
    .building {
        left: 18%; /* 調整建築位置 */
        width: 350px; /* 縮小建築寬度 */
    }
}

/* 響應式設計 - 小平板 */
@media (max-width: 992px) {
    .container {
        padding: 25px; /* 減少內邊距 */
    }
    
    .page-title {
        font-size: 2.8rem; /* 調整標題大小 */
        margin-bottom: 35px; /* 減少下邊距 */
    }
    
    .scene-container {
        height: 400px; /* 調整場景高度 */
        position: static; /* 改為靜態定位 */
        display: flex; /* 使用 flexbox */
        flex-direction: column; /* 垂直排列 */
        align-items: center; /* 居中對齊 */
        gap: 20px; /* 元素間距 */
    }
    
    .building {
        position: static; /* 改為靜態定位 */
        transform: none; /* 移除變換 */
        width: 320px; /* 縮小建築寬度 */
        height: 350px; /* 縮小建築高度 */
        margin-bottom: 20px; /* 下邊距 */
    }
    
    .qr-scanner {
        position: static; /* 改為靜態定位 */
        right: auto; /* 重置右側距離 */
        top: auto; /* 重置頂部距離 */
        width: 320px; /* 縮小寬度 */
        height: 320px; /* 縮小高度 */
        padding: 25px; /* 減少內邊距 */
        margin: 0 auto; /* 居中 */
    }
    
    .qr-code {
        width: 220px; /* 調整 QR Code 大小 */
        height: 220px; /* 調整 QR Code 大小 */
    }
    
    .student {
        position: static; /* 改為靜態定位 */
        left: auto; /* 重置左側距離 */
        bottom: auto; /* 重置底部距離 */
        margin: 20px auto 0; /* 居中對齊 */
        align-self: center; /* 自身居中 */
    }
    
    .welcome-message {
        position: static; /* 改為靜態定位 */
        transform: none; /* 移除變換 */
        margin: 20px 0; /* 上下邊距 */
        font-size: 2rem; /* 調整字體大小 */
        text-align: center; /* 居中對齊 */
    }
}

/* 響應式設計 - 手機版 */
@media (max-width: 768px) {
    body {
        padding: 10px; /* 增加 body 內邊距 */
        min-height: 100vh; /* 確保最小高度 */
        align-items: flex-start; /* 頂部對齊 */
    }
    
    .container {
        width: 100%; /* 全寬度 */
        padding: 20px; /* 減少內邊距 */
        margin: 10px 0; /* 上下邊距 */
        border-radius: 20px; /* 調整圓角 */
    }
    
    .page-title {
        font-size: 2.2rem; /* 縮小標題 */
        margin-bottom: 25px; /* 減少下邊距 */
        line-height: 1.2; /* 調整行高 */
    }
    
    .scene-container {
        height: auto; /* 自動高度 */
        min-height: 300px; /* 最小高度 */
        position: static; /* 靜態定位 */
        display: flex; /* flexbox 佈局 */
        flex-direction: column; /* 垂直排列 */
        align-items: center; /* 居中對齊 */
        gap: 20px; /* 元素間距 */
        padding: 20px; /* 內邊距 */
    }
    
    .building {
        position: static; /* 靜態定位 */
        transform: none; /* 移除變換 */
        width: 280px; /* 縮小建築寬度 */
        height: 300px; /* 縮小建築高度 */
        margin: 0 auto; /* 居中 */
        order: 1; /* 排序 */
    }
    
    .building-name {
        font-size: 1.1rem; /* 調整字體大小 */
        padding: 10px 20px; /* 調整內邊距 */
        top: 20px; /* 調整頂部距離 */
    }
    
    .windows {
        padding: 80px 30px 20px; /* 調整內邊距 */
        gap: 10px; /* 減少間距 */
    }
    
    .window {
        width: 65px; /* 縮小窗戶寬度 */
        height: 80px; /* 縮小窗戶高度 */
    }
    
    .entrance {
        width: 120px; /* 縮小入口寬度 */
        height: 160px; /* 縮小入口高度 */
    }
    
    .qr-scanner {
        position: static; /* 靜態定位 */
        right: auto; /* 重置右側距離 */
        top: auto; /* 重置頂部距離 */
        width: 280px; /* 縮小寬度 */
        height: 280px; /* 縮小高度 */
        padding: 20px; /* 減少內邊距 */
        margin: 0 auto; /* 居中 */
        order: 2; /* 排序 */
    }
    
    .scanner-title {
        font-size: 1.3rem; /* 調整字體大小 */
        margin-bottom: 20px; /* 減少下邊距 */
    }
    
    .qr-code {
        width: 180px; /* 調整 QR Code 大小 */
        height: 180px; /* 調整 QR Code 大小 */
        margin-bottom: 20px; /* 減少下邊距 */
    }
    
    .scanner-status {
        width: 40px; /* 縮小指示燈 */
        height: 40px; /* 縮小指示燈 */
    }
    
    .student {
        position: static; /* 靜態定位 */
        left: auto; /* 重置左側距離 */
        bottom: auto; /* 重置底部距離 */
        margin: 0 auto; /* 居中 */
        order: 3; /* 排序 */
    }
    
    .student-card {
        right: -35px; /* 調整位置 */
        width: 55px; /* 縮小寬度 */
        height: 35px; /* 縮小高度 */
        font-size: 0.75rem; /* 調整字體大小 */
    }
    
    .welcome-message {
        position: static; /* 靜態定位 */
        transform: none; /* 移除變換 */
        margin: 20px 0; /* 上下邊距 */
        font-size: 1.6rem; /* 調整字體大小 */
        text-align: center; /* 居中對齊 */
        order: 4; /* 排序 */
    }
    
    .status-message {
        margin-top: 20px; /* 減少上邊距 */
        padding: 20px 25px; /* 調整內邊距 */
        font-size: 1rem; /* 調整字體大小 */
        line-height: 1.5; /* 調整行高 */
        border-radius: 15px; /* 調整圓角 */
    }
}

/* 響應式設計 - 小手機版 */
@media (max-width: 480px) {
    .container {
        padding: 15px; /* 進一步減少內邊距 */
        border-radius: 15px; /* 調整圓角 */
    }
    
    .page-title {
        font-size: 1.8rem; /* 進一步縮小標題 */
        margin-bottom: 20px; /* 減少下邊距 */
    }
    
    .scene-container {
        padding: 15px; /* 減少內邊距 */
        gap: 15px; /* 減少元素間距 */
    }
    
    .building {
        width: 240px; /* 進一步縮小建築寬度 */
        height: 250px; /* 進一步縮小建築高度 */
    }
    
    .building-name {
        font-size: 1rem; /* 調整字體大小 */
        padding: 8px 15px; /* 調整內邊距 */
    }
    
    .windows {
        padding: 70px 20px 15px; /* 調整內邊距 */
        gap: 8px; /* 減少間距 */
    }
    
    .window {
        width: 55px; /* 進一步縮小窗戶寬度 */
        height: 70px; /* 進一步縮小窗戶高度 */
    }
    
    .entrance {
        width: 100px; /* 進一步縮小入口寬度 */
        height: 130px; /* 進一步縮小入口高度 */
    }
    
    .qr-scanner {
        width: 240px; /* 進一步縮小寬度 */
        height: 240px; /* 進一步縮小高度 */
        padding: 15px; /* 減少內邊距 */
    }
    
    .scanner-title {
        font-size: 1.1rem; /* 調整字體大小 */
        margin-bottom: 15px; /* 減少下邊距 */
    }
    
    .qr-code {
        width: 150px; /* 調整 QR Code 大小 */
        height: 150px; /* 調整 QR Code 大小 */
        margin-bottom: 15px; /* 減少下邊距 */
    }
    
    .scanner-status {
        width: 35px; /* 進一步縮小指示燈 */
        height: 35px; /* 進一步縮小指示燈 */
    }
    
    .student-head {
        width: 45px; /* 縮小頭部 */
        height: 45px; /* 縮小頭部 */
    }
    
    .student-body {
        width: 65px; /* 縮小身體 */
        height: 80px; /* 縮小身體 */
    }
    
    .student-card {
        right: -30px; /* 調整位置 */
        width: 50px; /* 進一步縮小寬度 */
        height: 30px; /* 進一步縮小高度 */
        font-size: 0.7rem; /* 調整字體大小 */
    }
    
    .student-legs {
        width: 65px; /* 縮小腿部 */
        height: 45px; /* 縮小腿部 */
    }
    
    .welcome-message {
        font-size: 1.3rem; /* 調整字體大小 */
    }
    
    .status-message {
        padding: 15px 20px; /* 調整內邊距 */
        font-size: 0.9rem; /* 調整字體大小 */
        border-radius: 12px; /* 調整圓角 */
    }
}

/* 為 entrance-open.html 頁面設計的特殊樣式 */
/* 檢查是否為 entrance-open.html 頁面 */
body:has(.entrance.open) .scene-container,
html[data-page="entrance-open"] .scene-container {
    /* 調整場景容器為置中佈局 */
    display: flex; /* 使用 flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 500px; /* 固定高度 */
    gap: 30px; /* 元素間距 */
}

/* 在 entrance-open 頁面隱藏 QR Code 掃描器 */
body:has(.entrance.open) .qr-scanner,
html[data-page="entrance-open"] .qr-scanner {
    display: none !important; /* 完全隱藏 */
}

/* 在 entrance-open 頁面讓建築物和學生置中排列 */
body:has(.entrance.open) .building,
html[data-page="entrance-open"] .building {
    position: static; /* 改為靜態定位 */
    transform: none; /* 移除變換 */
    left: auto; /* 重置左側位置 */
    bottom: auto; /* 重置底部位置 */
    margin: 0; /* 重置邊距 */
    width: 400px; /* 保持原始寬度 */
    height: 450px; /* 保持原始高度 */
    order: 1; /* 建築物排在第一個 */
}

/* 在 entrance-open 頁面讓學生置中顯示 */
body:has(.entrance.open) .student,
html[data-page="entrance-open"] .student {
    position: static; /* 改為靜態定位 */
    left: auto; /* 重置左側位置 */
    bottom: auto; /* 重置底部位置 */
    margin: 0; /* 重置邊距 */
    order: 2; /* 學生排在第二個 */
    align-self: flex-end; /* 底部對齊 */
}

/* 歡迎訊息在 entrance-open 頁面的調整 */
body:has(.entrance.open) .welcome-message,
html[data-page="entrance-open"] .welcome-message {
    position: absolute; /* 保持絕對定位 */
    top: 20%; /* 調整位置 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 居中 */
    z-index: 10; /* 提高層級 */
}

/* 針對不同螢幕尺寸的 entrance-open 頁面優化 */
@media (max-width: 1200px) {
    body:has(.entrance.open) .building,
    html[data-page="entrance-open"] .building {
        width: 350px; /* 調整寬度 */
        height: 400px; /* 調整高度 */
    }
    
    body:has(.entrance.open) .scene-container,
    html[data-page="entrance-open"] .scene-container {
        gap: 25px; /* 調整間距 */
    }
}

@media (max-width: 992px) {
    body:has(.entrance.open) .scene-container,
    html[data-page="entrance-open"] .scene-container {
        height: 450px; /* 調整高度 */
        gap: 20px; /* 調整間距 */
    }
    
    body:has(.entrance.open) .building,
    html[data-page="entrance-open"] .building {
        width: 320px; /* 調整寬度 */
        height: 380px; /* 調整高度 */
    }
}

@media (max-width: 768px) {
    body:has(.entrance.open) .scene-container,
    html[data-page="entrance-open"] .scene-container {
        height: auto; /* 自動高度 */
        flex-direction: column; /* 改為垂直排列 */
        padding: 20px; /* 內邊距 */
        gap: 15px; /* 調整間距 */
    }
    
    body:has(.entrance.open) .building,
    html[data-page="entrance-open"] .building {
        width: 280px; /* 調整寬度 */
        height: 320px; /* 調整高度 */
    }
    
    body:has(.entrance.open) .student,
    html[data-page="entrance-open"] .student {
        align-self: center; /* 居中對齊 */
    }
    
    body:has(.entrance.open) .welcome-message,
    html[data-page="entrance-open"] .welcome-message {
        position: static; /* 改為靜態定位 */
        transform: none; /* 移除變換 */
        margin: 15px 0; /* 上下邊距 */
        order: 3; /* 排在最後 */
    }
}

@media (max-width: 480px) {
    body:has(.entrance.open) .scene-container,
    html[data-page="entrance-open"] .scene-container {
        padding: 15px; /* 內邊距 */
        gap: 10px; /* 調整間距 */
    }
    
    body:has(.entrance.open) .building,
    html[data-page="entrance-open"] .building {
        width: 240px; /* 調整寬度 */
        height: 280px; /* 調整高度 */
    }
    
    body:has(.entrance.open) .welcome-message,
    html[data-page="entrance-open"] .welcome-message {
        font-size: 1.2rem; /* 調整字體大小 */
    }
}