/* hero-game.css — เวทีเกมพื้นหลัง hero (คู่กับ hero-game.js; พอร์ตจาก SORNKan GameStage)
 * .hg-stage เป็น overlay เต็ม hero, pointer-events: none ทุกชั้น (คลิกทะลุถึงเนื้อหา hero) */

.hg-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  /* ชั้นล่าง→บน: เส้นกริดขาว 50px → ไล่เฉดพาสเทล ฟ้า/ลาเวนเดอร์/ชมพู/มินต์ (โทนเดียวกับธีมกระดาษสมุด) */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(135deg, #e0f2fe 0%, #ede9fe 35%, #fce7f3 65%, #d1fae5 100%);
  background-size: 50px 50px, 50px 50px, 100% 100%;
}

/* ---------- ไอคอนบนกริด (อีโมจิอุปกรณ์ครู) ---------- */
.hg-cells { position: absolute; inset: 0; }
.hg-cell {
  position: absolute;
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1;
  /* สถานะซ่อน: จางเป็นลายเส้นบนกระดาษ — โดนเมาส์/แสงกวาดผ่านค่อย "ตื่น" เป็นสีจริง */
  opacity: 0.10;
  filter: grayscale(1);
  transition: opacity 0.3s ease-out, filter 0.3s ease-out;
  user-select: none;
}
.hg-cell.is-on {
  opacity: 0.85;
  filter: grayscale(0);
  animation: hg-wake 0.3s ease-out;
}
@keyframes hg-wake {
  from { opacity: 0.1; transform: scale(0.85); }
  to { opacity: 0.85; transform: scale(1); }
}

/* ---------- แสงตามเมาส์ (เขียว = ผู้เล่น) / แสงม่วง (เป้าให้ไล่จับ) ---------- */
.hg-glow { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; filter: blur(8px); }
.hg-user {
  width: 50px; height: 50px;
  background: rgba(34, 197, 94, 0.3);
  box-shadow:
    0 0 50px rgba(34, 197, 94, 0.5),
    0 0 100px rgba(34, 197, 94, 0.3),
    0 0 150px rgba(34, 197, 94, 0.1);
}
.hg-virtual {
  width: 30px; height: 30px;
  background: rgba(147, 51, 234, 0.35);
  box-shadow:
    0 0 30px rgba(147, 51, 234, 0.5),
    0 0 60px rgba(147, 51, 234, 0.3),
    0 0 90px rgba(147, 51, 234, 0.1);
}
/* ลูกแก้วแดง = กับดัก (โดนแล้ว −แต้ม/จอสั่น) — สะท้อน .hg-virtual แต่เป็นสีแดงเตือน */
.hg-red {
  background: rgba(239, 68, 68, 0.35);
  box-shadow:
    0 0 30px rgba(239, 68, 68, 0.55),
    0 0 60px rgba(239, 68, 68, 0.3),
    0 0 90px rgba(239, 68, 68, 0.12);
  animation: hg-red-pulse 1.1s ease-in-out infinite;
}
@keyframes hg-red-pulse {
  0%, 100% { opacity: 0.85; filter: blur(8px); }
  50% { opacity: 1; filter: blur(11px); }
}

/* จอสั่นตอนโดนกับดัก (~0.4s) — คลาสใส่บน .hg-stage เอง */
.hg-shake { animation: hg-shake 0.4s ease-in-out; }
@keyframes hg-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 3px); }
  30% { transform: translate(5px, -4px); }
  45% { transform: translate(-5px, -3px); }
  60% { transform: translate(4px, 4px); }
  75% { transform: translate(-3px, 2px); }
  90% { transform: translate(2px, -2px); }
}

/* ---------- เอฟเฟกต์ตอนชน: แสงฟุ้ง + วงแหวน + ประกาย 6 เม็ด ---------- */
.hg-fx { position: absolute; inset: 0; }
.hg-burst { position: absolute; width: 0; height: 0; }
.hg-burst-glow {
  position: absolute; left: -60px; top: -60px; width: 120px; height: 120px;
  border-radius: 50%; filter: blur(4px);
  background: radial-gradient(circle, rgba(124, 58, 237, 0.8) 0%, rgba(124, 58, 237, 0) 70%);
  animation: hg-burst-glow 1s ease-out forwards;
}
@keyframes hg-burst-glow {
  0% { transform: scale(0); opacity: 0.9; }
  40% { transform: scale(1.6); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; filter: blur(14px); }
}
.hg-burst-ring {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
  border-radius: 50%; border: 2px solid rgba(124, 58, 237, 0.9);
  animation: hg-burst-ring 0.85s ease-out forwards;
}
@keyframes hg-burst-ring {
  0% { transform: scale(0); opacity: 1; border-width: 3px; }
  70% { transform: scale(2); opacity: 0.3; border-width: 1px; }
  100% { transform: scale(3); opacity: 0; border-width: 1px; }
}
.hg-burst-spark {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px;
  border-radius: 50%; background: rgba(124, 58, 237, 0.95);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.7);
  animation: hg-burst-spark 0.9s ease-out 50ms forwards;
}
@keyframes hg-burst-spark {
  0% { transform: translate(0, 0) scale(0); opacity: 0; }
  10% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ---------- ป้ายคะแนน (มุมขวาบนของ hero) ---------- */
.hg-score { position: absolute; top: 14px; right: 14px; text-align: center; }
.hg-score-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Prompt", sans-serif; font-size: 0.82rem; color: #fff;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #ec4899 100%);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4), 0 1px 4px rgba(0, 0, 0, 0.15);
}
.hg-score-pill b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.hg-score-pill span { opacity: 0.8; font-size: 0.72rem; }
.hg-score-pill .hg-level { opacity: 1; font-weight: 700; background: rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 1px 8px; }
.hg-pop { animation: hg-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hg-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.hg-best { margin-top: 4px; font-family: "Prompt", sans-serif; font-size: 0.7rem; font-weight: 600; color: #7c3aed; }

/* ---------- คะแนนลอย + toast ---------- */
.hg-popup {
  position: absolute; transform: translate(-50%, -50%);
  font-family: "Prompt", sans-serif; font-size: 1rem; font-weight: 800; color: #fff;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.9), 0 2px 4px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  animation: hg-float 0.9s ease-out forwards;
}
@keyframes hg-float {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  15% { transform: translate(-50%, -70%) scale(1.2); opacity: 1; }
  60% { transform: translate(-50%, -110%) scale(1); opacity: 0.9; }
  100% { transform: translate(-50%, -150%) scale(0.9); opacity: 0; }
}
/* คะแนนลอยแบบติดลบ (โดนกับดัก) — โทนแดง */
.hg-popup-neg {
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.95), 0 2px 4px rgba(0, 0, 0, 0.45);
}

.hg-toast {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: "Prompt", sans-serif; font-size: 0.86rem; font-weight: 700; color: #fff;
  padding: 8px 18px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #db2777 100%);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5), 0 1px 4px rgba(0, 0, 0, 0.2);
}
.hg-toast-in { animation: hg-toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hg-toast-in {
  from { transform: translateX(-50%) translateY(-12px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
/* จอแคบ (มือถือ): ป้ายคะแนน (ขวาบน) กับ toast (กลางบน) อยู่แถวเดียวกันเลยชนกัน
   → ย้าย toast ลงมาเป็นเลนของตัวเองใต้แถวคะแนน */
@media (max-width: 600px) {
  .hg-toast { top: 78px; }
}

/* ---------- ลดการเคลื่อนไหว: เหลือแค่ fade ไม่มีเด้ง/วิ่ง ---------- */
@media (prefers-reduced-motion: reduce) {
  .hg-cell.is-on, .hg-pop, .hg-popup, .hg-toast-in, .hg-red, .hg-shake { animation: none; }
  .hg-shake { transform: none; }
  .hg-burst-glow, .hg-burst-ring, .hg-burst-spark {
    animation: hg-fade 0.4s ease-out forwards;
    transform: none;
  }
}
@keyframes hg-fade {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}