:root {
    --game-primary-bg: #F0FFF0;
    --game-secondary-bg: #FFFFFF;
    --game-text-color: #333333;
    --game-accent-color1: #4CAF50;
    --game-accent-color2: #FFC107;
    --game-button-color: #2196F3;
    --font-family-game: 'Kanit', sans-serif;
}

body {
    font-family: var(--font-family-game);
    margin: 0;
    background-color: var(--game-primary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: var(--game-text-color);
    overflow: hidden;
}

.game-container {
    width: 100%;
    max-width: 1200px; /* ขยายความกว้างสูงสุดสำหรับ 2 คอลัมน์ */
    height: 95vh;
    max-height: 800px;
    background-color: var(--game-secondary-bg);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.game-header {
    padding: 12px 20px;
    background-color: #66BB6A;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* ไม่ให้ header หด */
}
.game-header h1 { margin: 0; font-size: 1.6em; }
.back-to-activities-btn {
    color: white; text-decoration: none; font-size: 0.9em;
    padding: 7px 10px; background-color: rgba(255,255,255,0.15);
    border-radius: 5px; transition: background-color 0.3s;
}
.back-to-activities-btn:hover { background-color: rgba(255,255,255,0.3); }

.game-status-bar { 
    display: flex; justify-content: space-around; align-items: center; padding: 10px; 
    background-color: #C8E6C9; border-bottom: 2px solid #A5D6A7;
    flex-shrink: 0; /* ไม่ให้ status bar หด */
}
#moneyDisplay, #seasonDisplay { font-weight: 500; font-size: 1.1em; }
#moneyDisplay img { height: 24px; vertical-align: middle; margin-right: 5px; }
#farmHappinessDisplay { width: 30%; }
.progress-bar-container { width: 100%; height: 20px; background-color: #BDBDBD; border-radius: 10px; overflow: hidden; margin-top: 2px;}
.progress-bar-fill { height: 100%; background-color: var(--game-accent-color2); border-radius: 10px; text-align: center; color: #333; font-size: 0.8em; line-height: 20px; transition: width 0.5s ease;}

.game-layout {
    display: flex;
    flex-grow: 1; /* ให้ส่วนนี้ขยายเต็มพื้นที่ที่เหลือ */
    overflow: hidden; /* สำคัญมาก */
}

.left-panel {
    flex: 5; /* ให้คอลัมน์ซ้ายมีขนาด 5 ส่วน */
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.right-panel {
    flex: 4; /* ให้คอลัมน์ขวามีขนาด 4 ส่วน */
    background-color: #E8F5E9;
    padding: 15px;
    overflow-y: auto; /* *** จุดสำคัญ: ทำให้คอลัมน์นี้เลื่อนได้ *** */
    border-left: 2px solid #A5D6A7;
}

.farm-view { 
    position: relative; 
    width: 100%;
    height: 100%;
    background: url('images/farm_background.png') no-repeat center center; 
    background-size: cover;
    border-radius: 10px;
}
#farmerCharacter { position: absolute; left: 20px; bottom: 10px; }
#farmerCharacter img { height: 180px; /* ปรับขนาดให้เหมาะสมกับ layout ใหม่ */ transition: transform 0.5s; }
#farmPlotsContainer { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* จัดเป็น 2x2 */
    grid-template-rows: repeat(2, 1fr);
    gap: 15px; 
    position: absolute; 
    top: 50%; 
    left: 55%; /* ขยับไปทางขวาเล็กน้อย */
    transform: translate(-50%, -50%); 
    width: 60%; 
    height: 60%;
}
.farm-plot { background-color: rgba(0,0,0,0.1); border-radius: 10px; cursor: pointer; transition: transform 0.2s; }
.farm-plot:hover { transform: scale(1.05); }
.farm-plot img { width: 100%; height: 100%; object-fit: contain; }

.phase-container.hidden { display: none; }
.phase-title { text-align: center; color: var(--game-accent-color1); margin-top: 0; }
.mascot-instruction { display: flex; align-items: center; background-color: #fff; border-radius: 10px; padding: 10px; margin-bottom: 15px; border-left: 5px solid #FFC107; }
.mascot-instruction.aomtung { border-left-color: #4CAF50; }
.mascot-instruction img { height: 60px; margin-right: 10px; }
.mascot-instruction p { margin: 0; font-size: 0.95em; }

.shop-title {
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--game-accent-color1);
}

.event-card { text-align: center; padding: 10px; border-radius: 10px; margin: 0 auto 15px auto; background-color: #FFFDE7; border: 2px solid #FFF59D; }
.event-card img { height: 40px; margin-bottom: 5px; }

.seed-selection-container { 
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 คอลัมน์ */
    gap: 10px; 
}
.seed-card { border: 2px solid #ccc; border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; background-color: #fff; }
.seed-card.selected { border-color: var(--game-accent-color1); box-shadow: 0 0 10px var(--game-accent-color1); }
.seed-card.disabled { opacity: 0.5; cursor: not-allowed; }
.seed-card img { height: 50px; }
.seed-card p { margin: 5px 0 0 0; font-size: 0.85em; }

.growing-choices, .harvest-choices { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }
.harvest-btn { width: 100%; padding: 15px; font-size: 1.1em; }
.harvest-btn img { height: 60px; display: block; margin: 0 auto 10px auto; }

#seasonResultText { padding: 20px; text-align: center; font-size: 1.2em; line-height: 1.6; }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: 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; }
.modal-content h2 { color: var(--game-accent-color1); }
.modal-content img { height: 150px; margin: 15px 0; }

.game-btn {
    background-color: var(--game-button-color); color: white; border: none;
    padding: 12px 20px; border-radius: 8px; font-size: 1.1em; cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}
.game-btn:hover { background-color: #1a78c2; transform: scale(1.02); }

.hidden { display: none !important; }