:root { --gold: #f1c40f; --dark-gold: #d4af37; --bg-dark: #121212; --medieval-red: #8b0000; --energy-green: #2ecc71; --pause-blue: #3498db; --alert-red: #e74c3c; }
        
        * { box-sizing: border-box; }
        body, html { margin: 0; padding: 0; background-color: var(--bg-dark); color: #ecf0f1; font-family: sans-serif; height: 100%; display: flex; flex-direction: column; overflow: hidden; }

        @media screen {
            html { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
            video { background-color: #000; -webkit-touch-callout: none; } 
            canvas { background-color: transparent !important; -webkit-touch-callout: none; }
        }

        header { 
            background-color: var(--gold); color: #000; padding: 12px 20px; font-weight: bold; 
            flex-shrink: 0; border-bottom: 3px solid var(--dark-gold); z-index: 10; 
            display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem;
        }
        #header-timer { font-family: monospace; background: #000; color: var(--gold); padding: 2px 10px; border-radius: 5px; font-size: 1.4rem; }

        .main-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        
        .monitor-box { flex: 4; background: #000; position: relative; display: flex; justify-content: center; border-bottom: 2px solid #333; overflow: hidden; }
        
        #webcam, #output_canvas { 
            position: absolute; top: 0; left: 0; 
            width: 100%; height: 100%; 
            object-fit: cover; transform: scaleX(-1); 
        }
        #webcam { z-index: 1; }
        #output_canvas { z-index: 5; pointer-events: none; }
        
        #energy-light { position: absolute; top: 15px; right: 15px; width: 35px; height: 35px; border-radius: 50%; background: #333; border: 3px solid #fff; z-index: 20; transition: background 0.3s; }

        .story-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 15px 20px; text-align: center; background: linear-gradient(to bottom, #121212, #222); overflow: hidden; }
        
        #sentence-display { 
            flex: 1; width: 100%; font-size: 1.5rem; line-height: 1.5; color: #fff; 
            font-weight: bold; overflow-y: auto; margin-bottom: 10px; padding: 5px;
        }
        #status-alert { font-size: 1.1rem; color: var(--alert-red); font-weight: bold; min-height: 1.5rem; flex-shrink: 0; }

        /* footer 版面改用 CSS Grid：每個狀態各自宣告一份 grid-template-areas，
           元素放哪裡、多大都是明確寫出來的，不用再靠 flex-wrap 依 DOM 順序
           猜百分比湊排列（先前這樣搞出過兩次「選單沒並排／溢出畫面」的 bug）。
           三種狀態：
           - 預設（PREPARE/PAUSED/FINISHED）：完整顯示，無漢堡選單
           - .footer-collapsed（RUNNING 收合）：只留暫停／關卡選單／漢堡選單
           - .footer-collapsed.footer-menu-expanded（RUNNING + 點開漢堡）：
             全部顯示，且關卡選單⇄開始冒險、步調選單⇄查看紀錄 互換位置與大小 */
        footer {
            background: #000; border-top: 3px solid var(--dark-gold);
            flex-shrink: 0; z-index: 10;
            padding: 15px 10px;
            padding-bottom: calc(15px + env(safe-area-inset-bottom));
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "start pause"
                "record record"
                "level pace";
            gap: 10px;
        }
        footer.footer-collapsed {
            grid-template-columns: 1fr 1fr auto;
            grid-template-areas: "pause level menu";
        }
        footer.footer-collapsed.footer-menu-expanded {
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
                "level level level pause pause pause"
                "pace pace pace start record menu";
        }
        #start-btn { grid-area: start; }
        #pause-btn { grid-area: pause; }
        #record-btn { grid-area: record; }
        #level-selector { grid-area: level; }
        #pace-selector { grid-area: pace; }
        #footer-menu-btn { grid-area: menu; padding: 12px; font-size: 1.3rem; }

        button { font-weight: bold; border: none; border-radius: 50px; cursor: pointer; background: var(--gold); color: #000; box-shadow: 0 4px 0 var(--dark-gold); transition: all 0.1s; font-size: 1rem; padding: 12px 15px; }
        button:active { transform: translateY(2px); box-shadow: none; }
        button:disabled { background: #444; color: #888; box-shadow: none; cursor: not-allowed; }

        .pill-select {
            padding: 12px 15px; font-size: 1rem; font-weight: bold;
            border-radius: 50px; background: #222; color: var(--gold);
            border: 2px solid var(--gold); cursor: pointer;
            min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        /* input[type=password] 沿用 .pill-select 的深色金邊外觀，游標改回文字輸入 */
        input.pill-select { cursor: text; }

        /* 唯讀/鎖定狀態的下拉選單（例如 footer 的動作組合選單）：跟 button:disabled
           統一語彙，灰階配色 + 禁止游標，讓使用者一眼看出「這個不能點」 */
        .pill-select:disabled { background: #333; color: #777; border-color: #666; cursor: not-allowed; }

        #privacy-pack-picker .pill-select { text-align: center; }

        /* #prep-overlay 是 column 方向的 flex 容器，這裡讓 .pill-select
           用預設 flex 值（不 grow），只補一點間距 */
        #prep-pace-selector { margin-top: 15px; }

        #pause-btn { background: var(--pause-blue); color: white; box-shadow: 0 4px 0 #2980b9; }
        #pause-btn.paused { background: var(--energy-green); box-shadow: 0 4px 0 #27ae60; }
        #record-btn { background: #7f8c8d; color: white; box-shadow: 0 4px 0 #95a5a6; }
        #agree-privacy-btn:disabled { background: #333; color: #666; cursor: not-allowed; box-shadow: none; }

        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
        .hidden { display: none !important; }
        
        /* 載入與準備畫面 */
        #prep-overlay h1, #loading-overlay h1 { color: var(--gold); font-size: 2.8rem; margin: 0 0 20px 0; }
        #prep-overlay p { line-height: 1.8; margin-bottom: 30px; font-size: 1.6rem; }
        
        /* 條款視窗獨立設計 */
        .privacy-box { 
            background: #222; padding: 20px; border-radius: 10px; max-width: 500px; 
            text-align: left; line-height: 1.6; font-size: 1rem; margin-bottom: 20px; 
            border: 1px solid var(--dark-gold);
            max-height: 50vh; overflow-y: auto; overscroll-behavior: contain;
        }

        @media (min-width: 768px) {
            
            #sentence-display { font-size: 1.8rem; }
            #prep-overlay p { font-size: 1.3rem; }
            footer { padding: 15px 20px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); gap: 20px; }
            button { font-size: 1.1rem; padding: 12px 25px; }
        }