/* ==== ตัวแปรสี ปรับทีหลังง่าย ==== */
:root {
  --fb-bg-top: #1d1e22;
  --fb-bg-bottom: #101114;
  --fb-border: #f5c85d;
  --fb-text: #f5f5f5;
  --fb-text-dim: #d7d7d7;
  --fb-accent-bg: #18191f;
  --fb-accent-border: #f5c85d;
  --fb-active-text: #00ff48; /* สีตัวหนังสือปุ่ม "เข้าเล่น" (จะถูก override จาก Settings อีกที) */
}

/* แถบล่าง fixed */
#footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 30;
  background: transparent;
}

/* ตัวแถบด้านใน */
.fb-nav {
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(8px, 1.6vw, 10px) clamp(16px, 6vw, 24px) 2px;
  background: linear-gradient(180deg, var(--fb-bg-top), var(--fb-bg-bottom));
  border-top: 2px solid var(--fb-border);
  border-radius: 22px 22px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(4px, 1.6vw, 8px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.7);
  position: relative;
  overflow: visible; /* อนุญาตให้ปุ่มกลางล้นออก */
}

/* mobile only – ถ้าอยากให้ desktop เห็นด้วยก็ลบบล็อกนี้ได้ */
@media (min-width: 768px) {
  #footer-bar { display: none; }
}

/* ไอเท็มแต่ละอัน */
.fb-item {
  flex: 1;
  text-decoration: none;
  color: inherit; /* ปล่อยให้ span ข้างในเป็นคนกำหนดสี */
  font-size: 11px;
  position: relative;
}

/* กล่องด้านใน */
.fb-item-inner {
  height: clamp(52px, 14vw, 60px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1vw, 6px);
  transition: all .2s ease;
  background: transparent;
}

/* ไอคอน (ปุ่มทั่วไป) */
.fb-icon img {
  width: clamp(24px, 7vw, 30px);
  height: auto;
  display: block;
}

/* ข้อความ */
.fb-label {
  line-height: 1.2;
  font-weight: 600;
  font-size: clamp(12px, 3vw, 14px); /* ← ขยายขนาด */
  letter-spacing: 0.2px;              /* เพิ่มระยะห่างตัวอักษรเล็กน้อย */
  transition: color .2s ease;
  color: var(--fb-text-dim);          /* ✅ ใช้สีจากตัวแปร (ผูกกับ Settings) */
}

/* hover ปุ่มทั่วไป */
.fb-item:hover .fb-label {
  color: var(--fb-text);
}

/* ===== ปุ่มเข้าเล่นเด่นกว่าปกติ (ขยาย + responsive + animation) ===== */
.fb-item.is-active {
  position: relative;
  z-index: 10;
}

.fb-item.is-active .fb-item-inner {
  background: var(--fb-accent-bg);
  border: 1px solid var(--fb-accent-border);
  color: var(--fb-active-text); /* สีตัวหนังสือ "เข้าเล่น" */
  transform: translateY(clamp(-22px, -5vw, -14px)) scale(1);
  box-shadow:
    0 0 10px rgba(246,211,111,0.5),
    0 0 28px rgba(246,211,111,0.25),
    0 -6px 16px rgba(0,0,0,0.8);
  height: clamp(68px, 18vw, 80px);       /* สูงขึ้น แต่สเกลตามจอ */
  width: clamp(88px, 24vw, 110px);       /* กว้างขึ้นแบบสัมพันธ์กับจอ */
  border-radius: 16px;
  margin: 0 auto;
  animation: fbPulse 2.5s ease-in-out infinite;
}

/* ให้ label ของปุ่มเข้าเล่นใช้สี active ด้วย */
.fb-item.is-active .fb-label {
  color: var(--fb-active-text);
}

/* แสงขอบทองรอบปุ่มกลาง (ขยายให้ตามขนาดใหม่ + animation) */
.fb-item.is-active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(6px, 1.6vw, 10px);
  width: 120%;
  height: 90%;
  transform: translateX(-50%);
  border-radius: 18px;
  background: radial-gradient(circle at center, rgba(246,211,111,0.4), transparent 75%);
  filter: blur(10px);
  z-index: -1;
  animation: fbGlow 2.5s ease-in-out infinite;
}

/* เวลากดให้ยุบลงนิดหน่อย */
.fb-item.is-active:active .fb-item-inner {
  transform: translateY(clamp(-18px, -4vw, -12px)) scale(0.99);
}

/* ขยายเฉพาะไอคอนปุ่มเข้าเล่น */
.fb-item.is-active .fb-icon img {
  width: clamp(34px, 9vw, 44px);   /* ใหญ่กว่าปุ่มอื่นแบบสเกลตามจอ */
  height: auto;
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* เพิ่มลูกเล่น hover ให้ไอคอนเด้งเล็กน้อย */
.fb-item.is-active:hover .fb-icon img {
  transform: scale(1.18);
}

/* ===== Animation ปุ่มเข้าเล่น Call To Action ===== */
@keyframes fbPulse {
  0%, 100% {
    transform: translateY(clamp(-22px, -5vw, -14px)) scale(1);
    box-shadow:
      0 0 10px rgba(246,211,111,0.55),
      0 0 28px rgba(246,211,111,0.25),
      0 -6px 16px rgba(0,0,0,0.8);
  }
  50% {
    transform: translateY(clamp(-24px, -5.4vw, -16px)) scale(1.04);
    box-shadow:
      0 0 16px rgba(246,211,111,0.7),
      0 0 36px rgba(246,211,111,0.4),
      0 -8px 18px rgba(0,0,0,0.8);
  }
}

@keyframes fbGlow {
  0%, 100% {
    opacity: 0.45;
    filter: blur(10px);
  }
  50% {
    opacity: 0.9;
    filter: blur(12px);
  }
}