:root { --p1-color: #2563eb; --p2-color: #dc2626; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'PingFang SC', sans-serif; background: #cbd5e1; display: flex; justify-content: center; padding: 20px; }

.game-container { background: #fff; width: 1000px; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #eee; padding-bottom: 10px; }

/* 核心修改：8列 6行 */
.board { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(6, 1fr); 
    gap: 6px; 
    background: #94a3b8; 
    padding: 10px; 
    border-radius: 12px;
    height: 550px;
}

.cell {
    background: white; border-radius: 6px; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; font-size: 11px; font-weight: bold;
    position: relative; border: 2px solid transparent; overflow: hidden;
}

.cell-icon { font-size: 1.6em; margin-bottom: 2px; }
.cell-special { background: #fef3c7; }
.cell-start { background: #059669; color: white; }
.owned-p1 { border-color: var(--p1-color); background: #dbeafe; }
.owned-p2 { border-color: var(--p2-color); background: #fee2e2; }

/* 中间区域适配 8x6 */
.center-area { 
    grid-area: 2 / 2 / 6 / 8; background: #f1f5f9; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 4em; font-weight: 900; color: #e2e8f0; 
}

.token { width: 18px; height: 18px; border-radius: 50%; position: absolute; z-index: 10; border: 2px solid #fff; transition: 0.4s; }
.token-p1 { background: var(--p1-color); top: 3px; left: 3px; }
.token-p2 { background: var(--p2-color); bottom: 3px; right: 3px; }

.controls { display: flex; gap: 15px; height: 160px; }
.player-card { flex: 1; padding: 12px; border-radius: 12px; background: #f8fafc; border-top: 5px solid #ccc; }
#p1-card { border-color: var(--p1-color); }
#p2-card { border-color: var(--p2-color); }
.action-area { flex: 1.5; display: flex; flex-direction: column; gap: 8px; }
.log-box { flex: 1; background: #0f172a; color: #38bdf8; padding: 10px; border-radius: 8px; overflow-y: auto; font-size: 12px; }
button { padding: 10px; background: #2563eb; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
button:disabled { background: #94a3b8; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 100; }
.modal-content { background: white; padding: 30px; border-radius: 15px; text-align: center; }
.hidden { display: none; }
.modal-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }