/* 移除全畫面及棋盤的文字選取與預設藍色點擊外框 */
		body, .cell, .chessboard {
			-webkit-user-select: none;  /* Safari */
			-moz-user-select: none;     /* Firefox */
			-ms-user-select: none;      /* IE10+ */
			user-select: none;          /* 標準語法：禁止選取文字 */
			
			-webkit-tap-highlight-color: transparent; /* 移除手機端點擊時的藍色高亮區塊 */
		}

		.cell:focus {
			outline: none; /* 移除點擊時的焦點框 */
		}
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background:
                linear-gradient(135deg, rgba(46, 125, 50, 0.12), transparent 34%),
                linear-gradient(315deg, rgba(196, 151, 43, 0.18), transparent 34%),
                #f5f1e8;
            margin: 0;
            font-family: "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
        }

        /* ==================== 1. 大廳配對畫面 ==================== */
        #lobby {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: min(420px, calc(100vw - 32px));
            background: #fffdf7;
            padding: 26px;
            border: 1px solid rgba(110, 78, 35, 0.16);
            border-radius: 8px;
            box-shadow: 0 18px 44px rgba(48, 35, 16, 0.18);
        }
        .lobby-header {
            margin-bottom: 18px;
            text-align: center;
        }
        .lobby-header h2 {
            margin: 0;
            color: #2b2115;
            font-size: 34px;
            letter-spacing: 0;
        }
        .lobby-header p {
            margin: 8px 0 0;
            color: #746755;
            font-size: 14px;
            line-height: 1.5;
        }
        .match-btn {
            width: 100%;
            min-height: 46px;
            padding: 12px 18px;
            font-size: 16px;
            font-weight: bold;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(46, 125, 50, 0.18);
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
        }
        .match-btn:hover { background-color: #236628; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(46, 125, 50, 0.24); }
        .match-btn.primary { background: #b7791f; box-shadow: 0 8px 18px rgba(183, 121, 31, 0.2); }
        .match-btn.primary:hover { background: #966316; box-shadow: 0 10px 22px rgba(183, 121, 31, 0.26); }
        .match-btn.secondary { background: #4b5563; box-shadow: 0 8px 18px rgba(75, 85, 99, 0.16); }
        .match-btn.secondary:hover { background: #374151; box-shadow: 0 10px 22px rgba(75, 85, 99, 0.22); }
        .match-btn:disabled { background-color: #ccc; cursor: not-allowed; }
        #lobby > .match-btn { margin-bottom: 12px; }
        .lobby-actions {
            display: grid;
            gap: 10px;
            padding-top: 12px;
            border-top: 1px solid rgba(110, 78, 35, 0.12);
        }
        .join-room-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 92px;
            gap: 8px;
        }
        .room-code-input {
            min-width: 0;
            padding: 0 12px;
            font-size: 16px;
            border: 1px solid rgba(110, 78, 35, 0.26);
            border-radius: 8px;
            background: #fffaf0;
            color: #2b2115;
        }
        .room-code-input:focus {
            outline: 2px solid rgba(183, 121, 31, 0.22);
            border-color: #b7791f;
        }
        .lobby-status {
            display: grid;
            gap: 6px;
            margin-top: 16px;
            color: #655b4b;
            font-size: 14px;
            text-align: center;
        }
        #match-status, #online-count { margin: 0; font-weight: bold; }

        /* ==================== 2. 遊戲主畫面（預設隱藏） ==================== */
        #game-view {
            display: none;
            flex-direction: column;
            align-items: center;
        }

        #control-panel {
            display: flex;
            gap: 20px;
            align-items: center;
            margin-bottom: 15px;
        }

        #status-panel {
            font-size: 20px;
            font-weight: bold;
            padding: 10px 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .role-indicator {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            padding: 5px 15px;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .game-container {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }

        /* ==================== 3. 墓園多欄不滾動優化 ==================== */
        .graveyard {
            width: 150px;             /* 寬度加寬以容納多欄 */
            height: 312px;            /* 與棋盤高度完美對齊 */
            background-color: #e0e0e0;
            border: 2px dashed #999;
            border-radius: 8px;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;         /* 內部捲軸，不撐開網頁外框 */
        }
        .graveyard-title {
            font-size: 14px;
            font-weight: bold;
            color: #555;
            margin-bottom: 10px;
            text-align: center;
            width: 100%;
        }
        .graveyard-pieces {
            display: grid;
            grid-template-columns: repeat(auto-fill, 38px); /* 自動填滿多欄 */
            gap: 6px;
            justify-content: center;
        }

        /* 墓園中的縮小棋子 */
        .graveyard .piece-container { width: 38px; height: 38px; }
        .graveyard .piece-front { font-size: 16px; border: 1px solid #a37a1a; }

        /* ==================== 4. 棋盤與棋子基本樣式 ==================== */
        .chessboard {
            display: grid;
            grid-template-columns: repeat(8, 75px);
            grid-template-rows: repeat(4, 75px);
            background-color: #e6b800;
            border: 5px double #222;
            padding: 6px;
            box-shadow: 0 12px 24px rgba(0,0,0,0.25);
        }

        .cell {
            border: 1px solid #444;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 75px;
            height: 75px;
            cursor: pointer;
        }
        .cell.selectable { background-color: rgba(0, 255, 0, 0.4) !important; }
        .cell.is-selected { background-color: rgba(0, 85, 255, 0.2); }
        .cell.is-selected .piece-front { outline: 3px solid #0055ff; box-shadow: 0 0 15px #0055ff; }

        .piece-container { width: 58px; height: 58px; perspective: 1000px; pointer-events: none; }
        .piece-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.4s; }
        .piece-container.is-flipped .piece-card { transform: rotateY(180deg); }

        .piece-front, .piece-back {
            position: absolute; width: 100%; height: 100%; border-radius: 50%;
            backface-visibility: hidden; display: flex; justify-content: center; align-items: center; box-sizing: border-box;
        }
        .piece-back { background: repeating-linear-gradient(45deg, #2e7d32, #2e7d32 5px, #1b5e20 5px, #1b5e20 10px); border: 3px solid #0e3a12; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .piece-front {
            background: radial-gradient(circle at 30% 30%, #fffdf7 0%, #f5e2b8 60%, #cfb070 100%);
            border: 2px solid #a37a1a; box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 -4px 4px rgba(0,0,0,0.15);
            transform: rotateY(180deg); font-family: "BiauKai", "SimSun", serif; font-size: 26px; font-weight: bold;
        }
        .piece-front.red { color: #cc0000; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); }
        .piece-front.black { color: #111111; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); }

        .surrender-btn { padding: 10px 20px; font-size: 16px; font-weight: bold; background-color: #e53935; color: white; border: none; border-radius: 8px; cursor: pointer; }