/* ================= เกม ภาระกิจสร้างวัตถุจำลอง ================= */
:root {
  --green-dark: #0f3d20;
  --green: #16532c;
  --cream: #f6e2b8;
  --stage-w: 1920px;
  --stage-h: 1080px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0b2415;
  font-family: "Kanit", "IBM Plex Sans Thai", "Leelawadee UI", "Tahoma", sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: top left;
  overflow: hidden;
  background: #3f4c3a;
  box-shadow: 0 0 60px rgba(0, 0, 0, .5);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

#screens { position: absolute; inset: 0; }

/* ---------------- screens ---------------- */
.screen {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .28s ease;
}
.screen.in { opacity: 1; }
.screen.tappable { cursor: pointer; }

.full-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ปุ่ม START */
#start-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
  transition: transform .12s ease;
  animation: pulse 2.2s ease-in-out infinite;
}
#start-btn:active { transform: translate(-50%, -50%) scale(.94); animation: none; }
@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.045); }
}

.menu-title {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -50%);
  width: 60%;
  text-align: center;
  font-size: 92px;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.15;
  text-shadow: 0 3px 0 rgba(255, 255, 255, .35);
}

/* ---------------- หน้าเลือกภาระกิจ ---------------- */
.select-title {
  position: absolute;
  left: 3%;
  top: 0;
  height: 11.5%;
  display: flex;
  align-items: center;
  font-size: 66px;
  font-weight: 800;
  text-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
/* เว้นที่ด้านบนให้พ้นแถบหัวข้อและป้ายแขวนที่อยู่มุมขวาบน */
#level-grid { position: absolute; inset: 22% 4% 3% 4%; }

.level-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
}
.level-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.level-btn:hover { transform: translate(-50%, -50%) scale(1.06); }
.level-btn:active { transform: translate(-50%, -50%) scale(.97); }
.level-btn .fallback-label {
  position: absolute;
  left: 0; right: 0; bottom: 4%;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  text-shadow: 0 3px 6px rgba(0, 0, 0, .6);
}
.level-btn.empty {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 4px dashed rgba(255, 255, 255, .35);
  border-radius: 24px;
}

/* ---------------- โหมดเล่นทีละภาระกิจตามลำดับ ---------------- */
/* ด่านที่ยังไม่ถึงคิว: ทำให้จางและซีด แต่ยังกดได้เพื่อให้สั่นเตือน */
.level-btn.locked img { filter: grayscale(1) brightness(.55); }
.level-btn.locked { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.level-btn.locked:hover { transform: translate(-50%, -50%); }

.lv-badge {
  position: absolute;
  top: 3%;
  right: 3%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 40px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.lv-badge.done { background: #22a12a; color: #fff; font-weight: 700; }
.lv-badge.lock { background: rgba(20, 24, 18, .82); }

@keyframes lvShake {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(calc(-50% - 12px), -50%); }
  50% { transform: translate(calc(-50% + 12px), -50%); }
  80% { transform: translate(calc(-50% - 7px), -50%); }
}
.level-btn.shake { animation: lvShake .38s ease; }

.grid-pager {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 30px;
}
.grid-pager button {
  font: inherit;
  padding: 8px 26px;
  border-radius: 999px;
  border: 0;
  background: var(--cream);
  color: var(--green-dark);
  font-weight: 700;
  cursor: pointer;
}
.grid-pager button:disabled { opacity: .35; cursor: default; }

/* ---------------- intro / instruction / reveal ---------------- */
.sign {
  position: absolute;
  right: 3%;
  top: 0;
  width: 34%;
  pointer-events: none;
}
/* ป้ายแขวนแบบวาดด้วย CSS (ใช้เมื่อไม่ได้อัปโหลดรูปป้าย) */
.sign-box {
  position: absolute;
  right: 4%;
  top: 6%;
  width: 30%;
  padding: 2.2% 2.6%;
  background: var(--cream);
  border: 12px solid #d9a86a;
  border-radius: 6px;
  transform: rotate(-2.2deg);
  text-align: center;
  color: var(--green-dark);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.sign-box::before,
.sign-box::after {
  content: '';
  position: absolute;
  top: -100%;
  width: 14px;
  height: 100%;
  background: #d9a86a;
}
.sign-box::before { left: 18%; }
.sign-box::after { right: 18%; }

.hero-object {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 46%;
  max-height: 82%;
  pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .35));
}
.instruction-bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  border: 10px solid #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6% 8%;
  font-size: 46px;
  line-height: 1.4;
  white-space: pre-line;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.reveal-text {
  position: absolute;
  right: 4%;
  top: 16%;
  width: 44%;
  text-align: center;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
  text-shadow: 0 4px 10px rgba(0, 0, 0, .55), 0 0 3px rgba(0, 0, 0, .5);
}
.tap-hint {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  font-size: 30px;
  padding: 10px 34px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  animation: breathe 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

/* ---------------- หน้าเล่นเกม ---------------- */
#silhouette {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .96;
  z-index: 1;
}
.piece {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  z-index: 10;
  will-change: left, top, transform;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4));
}
.piece.dragging {
  cursor: grabbing;
  z-index: 1000 !important;
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55));
}
.piece.snapping { transition: left .16s ease-out, top .16s ease-out; }
.piece.placed {
  pointer-events: none;
  cursor: default;
  z-index: 2;
  filter: none;
  animation: pop .28s ease-out;
}
@keyframes pop {
  0%   { transform: translate(-50%, -50%) scale(1.1); }
  60%  { transform: translate(-50%, -50%) scale(.97); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.piece.wrong { animation: shake .34s ease; }
@keyframes shake {
  0%,100% { transform: translate(-50%, -50%) rotate(0); }
  20% { transform: translate(calc(-50% - 12px), -50%) rotate(-2.5deg); }
  50% { transform: translate(calc(-50% + 12px), -50%) rotate(2.5deg); }
  80% { transform: translate(calc(-50% - 7px), -50%) rotate(-1.4deg); }
}

.progress {
  position: absolute;
  left: 50%;
  top: 2.4%;
  transform: translateX(-50%);
  font-size: 34px;
  font-weight: 700;
  padding: 8px 30px;
  border-radius: 999px;
  background: rgba(15, 61, 32, .78);
  z-index: 60;
  pointer-events: none;
}

#checkmark {
  position: absolute;
  transform: translate(-50%, -50%) scale(.2);
  width: 15%;
  opacity: 0;
  z-index: 2000;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45));
}
#checkmark.show { animation: checkPop .55s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes checkPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-25deg); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

/* ---------------- ปุ่มมุมจอ ---------------- */
.corner-btn {
  position: absolute;
  top: 22px;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 61, 32, .72);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3000;
  transition: background .15s, transform .12s;
}
.corner-btn:hover { background: rgba(15, 61, 32, .95); }
.corner-btn:active { transform: scale(.92); }
#btn-home { left: 22px; }
#btn-sound { right: 22px; }
/* วางมุมล่างขวา เพื่อไม่ให้บังป้ายแขวนและหัวข้อที่อยู่ด้านบน */
#btn-full { right: 22px; top: auto; bottom: 22px; opacity: .75; }
#btn-full:hover { opacity: 1; }
#btn-home[hidden] { display: none; }
.corner-btn .ico-off { display: none; }
/* ปุ่มเสียง: สลับไอคอนตามสถานะปิดเสียง */
body.muted #btn-sound .ico-on { display: none; }
body.muted #btn-sound .ico-off { display: block; }
/* ปุ่มเต็มจอ: สลับไอคอนตามสถานะเต็มจอ */
body.is-full #btn-full .ico-on { display: none; }
body.is-full #btn-full .ico-off { display: block; }
#btn-full[hidden] { display: none; }

/* ---------------- โหลด / ข้อผิดพลาด ---------------- */
#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 18px;
  background: #0b2415;
  z-index: 9000;
  transition: opacity .3s;
  font-size: 22px;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading p { margin: 0; }
.spinner {
  width: 54px; height: 54px;
  border: 5px solid rgba(255, 255, 255, .2);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#fatal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
  background: #0b2415;
  z-index: 9500;
  font-size: 24px;
  line-height: 1.7;
}
#fatal[hidden] { display: none; }
#fatal code {
  display: inline-block;
  background: rgba(255, 255, 255, .12);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 20px;
}

/* แถบทดลองเล่นจากหลังบ้าน */
#test-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  gap: 12px;
}
#test-bar button {
  font: inherit;
  font-size: 24px;
  padding: 10px 26px;
  border-radius: 999px;
  border: 0;
  background: var(--cream);
  color: var(--green-dark);
  font-weight: 700;
  cursor: pointer;
}