* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "LINE Seed Sans TH", sans-serif;
  margin: 0; padding: 0; min-height: 100vh;
  background: #000000; display: flex; flex-direction: column;
  align-items: center; color: #e0e0e0; overflow: hidden; 
}

/* ตั้งค่าให้ตัวเกมเต็มจอและสลับรูปภาพพื้นหลังได้ (background-image ถูกสั่งจาก JS) */
.game-window {
  position: relative; width: 100vw; max-width: none; height: 100vh; min-height: 100vh;
  background-color: #000000; border: none; border-radius: 0; display: flex;
  flex-direction: column; overflow: hidden; background-size: contain; 
  background-position: center; background-repeat: no-repeat; 
  transition: background-image 0.5s ease-in-out; /* ทำให้เปลี่ยนฉากแบบ Fade นุ่มๆ */
}

/* ================= UI ด้านบน (Status Board) ================= */
.status-board-container { width: 100%; padding: 30px 40px; position: absolute; top: 0; left: 0; z-index: 100; }
.circle-ui-bg { position: absolute; top: -120px; right: 0; width: 450px; height: 450px; object-fit: contain; z-index: 1; pointer-events: none; }
.status-board { display: flex; justify-content: space-between; align-items: flex-start; color: white; width: 100%; max-width: 100%; background-color: transparent; z-index: 2; position: relative; }
.left-side, .right-side { display: flex; gap: 15px; z-index: 2; align-items: center; }

.btn-lang {
  background-color: #222222; border: 3px solid #ffffff; border-radius: 50px; padding: 12px 20px;
  color: white; font-size: 1.1rem; font-weight: bold; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
  transition: all 0.2s; font-family: "LINE Seed Sans TH", sans-serif;
}
.btn-lang:hover { background-color: #ffe000; color: #000; border-color: #ffe000; transform: scale(1.05); }

.capsule {
  display: flex; align-items: center; background-color: #222222; border: 3px solid #ffffff; 
  border-radius: 50px; padding: 12px 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
  color: white; font-size: 1.2rem; font-weight: bold;
}

.capsule-circle-weather {
  display: flex; justify-content: center; align-items: center; background-color: #222222; 
  border: 4px solid #ffe000; border-radius: 50%; width: 130px; height: 130px; 
  box-shadow: 0 0 15px rgba(255, 224, 0, 0.4); right: 430px; position: relative; top: 150px; left: 375px; 
}
#weather-ui { font-size: 3rem; margin: 0; line-height: 1; }

.mood-content {
  position: relative; z-index: 2; display: flex; align-items: center; background-color: #222222;
  border: 3px solid #ffffff; border-radius: 50px; padding: 12px 30px; font-size: 1.2rem; font-weight: bold; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
}
.icon { margin-right: 5px; font-size: 1.3rem; }
.divider { margin: 0 20px; color: #777; }
.money-value { color: #ffe000; font-weight: bold; }

/* ================= หน้าต่าง POP-UP ตรงกลาง (Slot & Day Transition) ================= */
.slot-screen {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); /* จัดให้อยู่ตรงกลางเป๊ะ */
  background: rgba(0, 0, 0, 0.9); border: 3px solid #ffe000; border-radius: 15px; padding: 40px 60px;
  display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 50;
  box-shadow: 0 0 40px rgba(255, 224, 0, 0.4); backdrop-filter: blur(8px);
}
.slot-screen h2 { color: #ffffff; font-size: 2rem; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

/* อนิเมชันของช่องสล็อตตอนสุ่มเงิน */
.slots-container { display: flex; gap: 10px; }
.slot {
  background: #222222; border: 2px solid #777; border-radius: 6px; width: 55px; height: 80px;
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #777;
  font-weight: bold; font-family: monospace; transition: all 0.3s ease; position: relative; 
}
.slot.done {
  color: #ffe000; border-color: #ffe000;
  box-shadow: 0 0 15px rgba(255, 224, 0, 0.5) inset, 0 0 10px rgba(255, 224, 0, 0.5); text-shadow: 0 0 10px #ffe000;
}

/* เอฟเฟกต์ Pop-Out (ขยายแล้วจางหาย) ตอนที่สล็อตหยุดที่ตัวเลขเป้าหมาย */
.pop-digit {
  position: absolute; font-size: 2.5rem; color: #ffe000; font-weight: bold; pointer-events: none;
  z-index: 30; text-shadow: 0 0 20px #ffe000; animation: popOut 0.8s ease-out forwards;
}
@keyframes popOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } }

/* ================= CSS สำหรับหน้าต่างสรุปผลเปลี่ยนวัน ================= */
.day-title-text {
    font-size: 3rem; color: #ffe000; text-align: center; line-height: 1.2; text-shadow: 0 0 20px rgba(255, 224, 0, 0.6);
}
.summary-box {
    margin-top: 15px; text-align: center; font-size: 1.6rem; color: #fff; width: 100%;
    min-width: 300px; background: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 10px;
}
/* ฟอนต์ Monospace ทำให้ตัวเลขเรียงตรงกันสวยๆ */
.spin-num {
    font-family: monospace; font-weight: bold; display: inline-block; min-width: 80px; text-align: right;
}
/* สไตล์สำหรับยอดเงินที่ใช้ไป (สีแดงกระแทกตา) */
.spent-text {
    color: #ff4d4d; margin: 15px 0; font-weight: bold; text-shadow: 0 0 10px rgba(255, 77, 77, 0.6); transition: opacity 0.3s ease;
}
/* สไตล์เงินคงเหลือ (สีเขียว) */
.remain-text { color: #40d668; text-shadow: 0 0 10px rgba(64, 214, 104, 0.6); }
.summary-divider { border: none; border-top: 2px dashed #777; margin: 15px 0; }

/* ================= อนิเมชันตัวเลขเด้งเวลากินข้าว/โดนหักพลังงาน ================= */
.floating-text {
  position: absolute; top: -20px; right: -20px; font-weight: bold; font-size: 1.3rem;
  animation: floatUp 1s ease-out forwards; pointer-events: none; z-index: 200;
}
.floating-text.positive { color: #ffe000; text-shadow: 0 0 8px rgba(255, 224, 0, 0.8); }
.floating-text.negative { color: #ff4d4d; text-shadow: 0 0 8px rgba(255, 77, 77, 0.8); }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-40px) scale(1.3); } }

/* ================= UI ด้านล่าง (กล่องเนื้อเรื่อง & ปุ่มตัวเลือก) ================= */
.dialogue-wrapper { margin-top: auto; padding: 0; width: 100%; position: relative; z-index: 5; }
.name-tag {
  position: absolute; top: -30px; left: 20px; background: linear-gradient(90deg, rgba(253, 178, 21, 1) 0%, rgba(255, 121, 1, 1) 100%);
  color: #453005; padding: 4px 15px; font-size: 1.1rem; border-radius: 8px 8px 0 0; font-weight: bold; z-index: 6; box-shadow: 0 -2px 5px rgba(0,0,0,0.5);
}
.story-box {
  background: linear-gradient(90deg,rgba(113, 95, 59, 1) 0%, rgba(137, 116, 73, 1) 50%, rgba(113, 95, 59, 1) 100%);
  border-top: 3px solid #fcfe20; border-left: none; border-right: none; border-bottom: none;
  padding: 25px 20px 20px 20px; font-size: 1.15rem; line-height: 1.6; min-height: 300px; border-radius: 0; width: 100%; color: white; 
}
/* ล็อกตำแหน่งปุ่มให้อยู่ฝั่งซ้ายแบบตายตัว */
.action-buttons {
  position: absolute;
  bottom: 350px; 
  left: 100px; /* ปักหมุดชิดซ้าย (สามารถเปลี่ยนตัวเลข 60px เพื่อขยับซ้าย-ขวาได้ตามใจชอบครับ) */
  width: 400px; /* ล็อกความกว้างของกล่องให้คงที่ */
  max-width: 90vw; /* ป้องกันไม่ให้ล้นจอในหน้าจอมือถือ */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ล็อกให้ปุ่มเรียงซ้อนกันจากล่างขึ้นบนเสมอ (ไม่ให้ตัวล่างขยับ) */
  gap: 12px;
  z-index: 10;
  opacity: 75%;
}

/* ล็อกความกว้างของปุ่มทุกอันให้เท่ากัน */
.btn-action {
  width: 100%; /* บังคับให้ปุ่มยืดเต็มกล่อง 400px เสมอ */
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 15px 20px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "LINE Seed Sans TH", sans-serif;
  text-align: left;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  backdrop-filter: blur(5px);
  font-weight: bold;
}
.btn-action:hover {
  background: #ffffff; color: #121212; transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 10px rgba(64, 214, 104, 0.4);
}
.btn-action:disabled { opacity: 0.5; cursor: not-allowed; }

/* ================= อนิเมชันตัวเลขเด้งกลางจอ (Center Floating Text) ================= */
.center-floating-text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 3.5rem; /* ตัวเลขใหญ่สะใจกระแทกตา */
  pointer-events: none;
  z-index: 9999;
  animation: floatCenterUp 1.8s ease-out forwards;
  text-shadow: 0 5px 15px rgba(0,0,0,0.9); /* เงาเข้มให้อ่านง่ายบนทุกฉาก */
  white-space: nowrap; 
  display: flex;
  align-items: center;
  gap: 15px;
}

/* แยกระดับความสูง เพื่อไม่ให้ตัวเลขเด้งทับกันเวลามีหลายเหตุการณ์พร้อมกัน */
.center-floating-text.money-up, 
.center-floating-text.money-down { top: 40%; }

.center-floating-text.energy-up, 
.center-floating-text.energy-down { top: 50%; }

.center-floating-text.mood-up, 
.center-floating-text.mood-down { top: 60%; }

/* กำหนดสีของแต่ละสถานะ */
.center-floating-text.money-up { color: #ffe000; } 
.center-floating-text.money-down { color: #ff4d4d; } 
.center-floating-text.energy-up { color: #00d2ff; } 
.center-floating-text.energy-down { color: #ff9800; } 
.center-floating-text.mood-up { color: #ea5180; } 
.center-floating-text.mood-down { color: #9f70ba; } 

/* แอนิเมชันเด้งขึ้นมาแล้วค่อยๆ ลอยจางหายไปด้านบน */
@keyframes floatCenterUp {
  0% { opacity: 0; margin-top: 50px; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; margin-top: 0px; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; margin-top: -150px; transform: translate(-50%, -50%) scale(1); }
}