@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap');

        :root {
            --bg-color: #111827; --board-bg: transparent; --cell-bg: rgba(30, 41, 59, 0.7); --cell-border: rgba(255, 255, 255, 0.15);
            --accent-color: #14b8a6; --text-main: #f8fafc; --text-muted: #94a3b8;
            --success-color: #10b981; --danger-color: #f43f5e; --warning-color: #f59e0b;
        }

        body {
            margin: 0; padding: 0; background: radial-gradient(circle at center, #1f2937 0%, #111827 100%); color: var(--text-main);
            font-family: 'Outfit', "PingFang TC", "Microsoft JhengHei", sans-serif;
            display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden;
        }

        /* === 遊戲開始選單 === */
        #startScreen {
            position: fixed; inset: 0; background: var(--bg-color); z-index: 2000;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        }
        #startScreen h1 {
            font-size: 3.5rem; background: linear-gradient(135deg, #60a5fa, #a78bfa);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px;
        }
        #startScreen p { font-size: 1.5rem; color: var(--text-muted); margin-bottom: 40px; }
        .start-btn {
            padding: 15px 40px; font-size: 1.5rem; background: var(--cell-bg); color: white; border: 2px solid var(--cell-border);
            border-radius: 12px; cursor: pointer; transition: all 0.2s; font-weight: bold;
        }
        .start-btn:hover { background: var(--accent-color); border-color: var(--accent-color); transform: scale(1.05); }
        .continue-btn { background: #10b981; border-color: #10b981; margin-top: 30px; }
        .continue-btn:hover { background: #059669; }

        /* === 玩家名稱輸入框 === */
        .name-input {
            padding: 12px; font-size: 1.3rem; text-align: center; border-radius: 8px;
            border: 2px solid var(--cell-border); background: var(--bg-color); color: white;
            width: 100%; box-sizing: border-box; font-family: inherit; font-weight: 600;
        }
        .name-input:focus { border-color: var(--accent-color); outline: none; }

        /* === 頂部狀態列 (毛玻璃玩家資訊) === */
        .status-bar {
            position: absolute; top: 50%; left: 30px; transform: translateY(-50%);
            display: flex; flex-direction: column; gap: 20px; z-index: 100; justify-content: center;
        }
        .player-stat {
            width: 240px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 15px 20px; border-radius: 16px; backdrop-filter: blur(12px);
            display: flex; flex-direction: column; align-items: center; transition: all 0.3s;
            position: relative; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .player-stat.active {
            transform: translateY(-5px) scale(1.02);
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }
        .player-name { font-size: 1.4rem; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
        .player-money { font-size: 1.2rem; color: #34d399; font-weight: 600; margin-top: 5px; transition: color 0.3s; }

        /* === 底部設定控制項 (毛玻璃) === */
        .settings-controls { 
            position: absolute; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 100;
            background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px);
            padding: 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .toggle-btn, .reset-btn, .help-btn { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: var(--text-main); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; font-family: inherit; }
        .toggle-btn.active { background: var(--accent-color); border-color: var(--accent-color); }
        .help-btn { background: linear-gradient(135deg, #8b5cf6, #6d28d9); border-color: rgba(139, 92, 246, 0.5); color: white; }
        .help-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(139, 92, 246, 0.4); }
        .reset-btn { color: #f87171; border-color: rgba(248,113,113,0.3); background: transparent; }
        .reset-btn:hover { background: rgba(248, 113, 113, 0.15); }

        /* === 遊戲主體 === */
        .game-container { display: flex; flex-direction: column; align-items: center; margin-top: 60px; transform: scale(0.9); }
        .board { display: grid; grid-template-columns: repeat(9, 70px); grid-template-rows: repeat(9, 70px); gap: 6px; background: transparent; padding: 12px; border-radius: 20px; position: relative; }
        .cell { background: var(--cell-bg); border: 1.5px solid var(--cell-border); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; transition: all 0.2s; backdrop-filter: blur(4px); }
        .cell:hover { transform: scale(1.05); cursor: pointer; z-index: 10; box-shadow: 0 0 15px rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); }
        .cell-id { font-size: 0.7rem; color: var(--text-muted); position: absolute; top: 2px; left: 4px; }
        .cell-name { font-weight: 600; font-size: 0.8rem; text-align: center; padding: 0 2px; line-height: 1.1; }
        
        /* 連鎖地產加成特效 */
        .cell.combo-glow { animation: comboBreathe 1.5s infinite alternate; z-index: 5; }
        @keyframes comboBreathe {
            0% { box-shadow: 0 0 5px var(--glow-color); border-color: var(--glow-color); }
            100% { box-shadow: 0 0 25px var(--glow-color); border-color: var(--glow-color); transform: scale(1.05); }
        }

        /* 機場目標閃爍特效 */
        .cell.target-blink {
            animation: targetBlink 0.6s infinite alternate; z-index: 15;
            box-shadow: 0 0 20px #fbbf24; border-color: #fbbf24;
        }
        @keyframes targetBlink {
            0% { transform: scale(1); border-color: #fbbf24; }
            100% { transform: scale(1.1); border-color: #f59e0b; box-shadow: 0 0 30px #f59e0b; }
        }

        .prop-marker { position: absolute; bottom: 2px; left: 4px; right: 4px; height: 14px; border-radius: 4px; font-size: 9px; color: white; display: flex; justify-content: center; align-items: center; letter-spacing: 2px; transition: background 0.3s; }

        .center-panel { grid-column: 2 / 9; grid-row: 2 / 9; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; }
        .center-title { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #cbd5e1, #f8fafc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 30px; text-align: center; letter-spacing: 4px; text-shadow: 0 4px 6px rgba(0,0,0,0.5); }
        .dice-container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
        .dice { width: 70px; height: 70px; background: rgba(255,255,255,0.9); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3), inset 0 -4px 6px rgba(0,0,0,0.1); color: #0f172a; font-size: 2.5rem; font-weight: bold; display: flex; justify-content: center; align-items: center; border-radius: 12px; transition: transform 0.3s; }
        .dice.rolling { animation: roll 0.5s infinite; }
        @keyframes roll { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
        .roll-btn { padding: 15px 40px; font-size: 1.3rem; font-weight: 800; letter-spacing: 1px; color: white; background: linear-gradient(135deg, #0d9488, #0f766e); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; cursor: pointer; transition: all 0.2s; box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.4); }
        .roll-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 15px 20px -3px rgba(13, 148, 136, 0.6); }
        .roll-btn:disabled { background: rgba(255,255,255,0.1); color: var(--text-muted); cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: none; border: 1px solid rgba(255,255,255,0.05); }
        
        .player-token { 
            position: absolute; width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; 
            color: white; font-size: 16px; font-weight: bold; display: flex; justify-content: center; align-items: center; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.5); transition: transform 0.2s linear; z-index: 100;
            top: 0; left: 0; 
        }
        .info-text { margin-top: 15px; font-size: 1.4rem; color: #f8fafc; font-weight: 800; background: rgba(0,0,0,0.3); padding: 5px 15px; border-radius: 8px; }

        /* === 模態視窗 === */
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 1000; }
        .modal-overlay.active { display: flex; }
        .modal-box { background: var(--board-bg); border: 1px solid var(--cell-border); border-radius: 20px; padding: 40px; width: 600px; max-width: 90%; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; gap: 25px; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align: center; }
        @keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        .modal-box h2 { margin: 0; color: var(--accent-color); font-size: 2rem; white-space: pre-line; }
        
        .rules-content { text-align: left; max-height: 60vh; overflow-y: auto; padding-right: 15px; width: 100%; line-height: 1.6; font-size: 1.1rem; }
        .rules-content h3 { color: #cbd5e1; margin-top: 25px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 1.3rem; }
        .rules-content p { color: #94a3b8; margin: 0 0 15px 0; }
        .rules-content ul { color: #94a3b8; margin: 0 0 15px 0; padding-left: 20px; }
        .rules-content li { margin-bottom: 8px; }
        .rules-content strong { color: #f8fafc; }
        /* 捲軸樣式 */
        .rules-content::-webkit-scrollbar { width: 8px; }
        .rules-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
        .rules-content::-webkit-scrollbar-thumb { background: var(--cell-border); border-radius: 4px; }

        .question-container { width: 100%; background: var(--cell-bg); padding: 30px 25px; border-radius: 12px; font-size: 1.3rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); white-space: pre-line; line-height: 1.5; }
        .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .option-btn { background: var(--board-bg); color: white; border: 2px solid var(--cell-border); padding: 15px; border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; font-weight: 600; }
        .option-btn.selected { border-color: var(--accent-color); background: rgba(59, 130, 246, 0.2); transform: scale(1.03); }
        .option-btn:hover:not(.selected) { border-color: var(--text-muted); background: rgba(255,255,255,0.05); }
        
        .modal-actions { display: flex; gap: 20px; width: 100%; justify-content: center; flex-wrap: wrap; }
        .action-btn { padding: 12px 24px; font-size: 1.1rem; font-weight: 600; border-radius: 8px; cursor: pointer; border: none; transition: all 0.2s; font-family: inherit; }
        .confirm-btn { background: var(--accent-color); color: white; }
        .confirm-btn:hover { background: #2563eb; transform: translateY(-2px); }
        .cancel-btn { background: transparent; color: var(--text-muted); border: 2px solid var(--cell-border); }
        .cancel-btn:hover { background: rgba(255,255,255,0.1); color: white; }
        
        /* === 遊戲結算畫面 === */
        #gameOverScreen {
            position: fixed; inset: 0; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(15px);
            z-index: 4000; display: none; flex-direction: column; align-items: center; justify-content: flex-start;
            animation: fadeIn 0.5s ease-out; padding: 60px 0; overflow-y: auto; box-sizing: border-box;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        #gameOverScreen.active { display: flex; }
        
        .analysis-card {
            background: rgba(30, 41, 59, 0.8); border: 2px solid var(--cell-border); border-radius: 16px;
            padding: 30px; margin-top: 30px; width: 600px; max-width: 90%; backdrop-filter: blur(10px);
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); text-align: left;
        }
        .analysis-card h2 { color: #f8fafc; margin-top: 0; text-align: center; font-size: 1.8rem; margin-bottom: 20px; }
        .stat-row { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 12px; }
        .stat-icon { font-size: 2.5rem; }
        .stat-info h4 { margin: 0 0 5px 0; color: #94a3b8; font-size: 1.1rem; }
        .stat-info p { margin: 0; color: #f8fafc; font-size: 1.2rem; font-weight: bold; }
        .stat-info .highlight { color: #34d399; }
        .stat-info .danger { color: #f43f5e; }
        
        #gameOverScreen h1 {
            font-size: 4rem; margin-bottom: 40px; text-shadow: 0 4px 20px rgba(251, 191, 36, 0.6);
            background: linear-gradient(135deg, #fcd34d, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        
        .leaderboard-container {
            display: flex; flex-direction: column; gap: 15px; width: 600px; max-width: 90%;
        }
        
        .rank-card {
            display: flex; align-items: center; justify-content: space-between; padding: 20px 30px;
            background: rgba(51, 65, 85, 0.8); border: 2px solid var(--cell-border); border-radius: 16px;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); transform: scale(1); transition: transform 0.3s;
        }
        .rank-card:hover { transform: scale(1.02); }
        
        .rank-card.rank-1 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.4)); border-color: #f59e0b; box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
        .rank-card.rank-2 { background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(100, 116, 139, 0.4)); border-color: #94a3b8; }
        .rank-card.rank-3 { background: linear-gradient(135deg, rgba(180, 83, 9, 0.2), rgba(146, 64, 14, 0.4)); border-color: #b45309; }
        
        .rank-info { display: flex; align-items: center; gap: 20px; }
        .rank-badge { font-size: 2.5rem; font-weight: 900; width: 60px; text-align: center; }
        .rank-name { font-size: 1.8rem; font-weight: 800; }
        
        .rank-stats { text-align: right; }
        .rank-total { font-size: 2rem; font-weight: 900; color: #fbbf24; margin-bottom: 5px; }
        .rank-details { font-size: 1rem; color: var(--text-muted); }
        
        /* === 側邊選單 (Side Panel) === */
        .side-panel {
            position: fixed; top: 0; right: -400px; width: 350px; height: 100vh;
            background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px);
            border-left: 2px solid var(--cell-border); box-shadow: -10px 0 30px rgba(0,0,0,0.5);
            transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1500;
            display: flex; flex-direction: column; padding: 40px 20px; box-sizing: border-box;
        }
        .side-panel.active { right: 0; }
        .side-panel h2 { color: var(--accent-color); font-size: 2rem; margin-top: 0; margin-bottom: 5px; }
        .side-panel p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 25px; margin-top: 0; }
        .airport-btn {
            background: var(--board-bg); border: 2px solid var(--cell-border); color: white;
            padding: 15px; border-radius: 12px; font-size: 1.2rem; cursor: pointer;
            margin-bottom: 15px; transition: all 0.2s; text-align: left; font-weight: bold; font-family: inherit;
        }
        .airport-btn:hover { background: rgba(59, 130, 246, 0.2); border-color: var(--accent-color); transform: translateX(-5px); }
        .airport-btn.cancel { background: transparent; border-color: var(--danger-color); color: var(--danger-color); text-align: center; margin-top: auto; margin-bottom: 0; }
        .airport-btn.cancel:hover { background: rgba(244, 63, 94, 0.1); transform: none; }
        
        /* === 偷看地圖按鈕與效果 === */
        .modal-overlay.peeking {
            background: transparent !important;
            backdrop-filter: none !important;
        }
        .modal-overlay.peeking .modal-box {
            opacity: 0.1 !important;
            pointer-events: none !important;
        }