/* =========================================================
   สไตล์เฉพาะหน้าแรก (index.html) — ปรับให้เป็นทางการ อ่านง่าย
   ใช้ฟอนต์ Sarabun (ฟอนต์ราชการ/เอกสารทางการที่ใช้แพร่หลาย)
   สโคปด้วย html.home-formal เพื่อไม่กระทบหน้าเกม/แอดมิน
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

html.home-formal { font-size: 16px; }

html.home-formal body {
  font-family: 'Sarabun', 'Noto Sans Thai', 'Prompt', sans-serif;
  font-weight: 400;
  background: #f4f6f8;
  color: #1f2937;
}

html.home-formal h1,
html.home-formal h2,
html.home-formal h3,
html.home-formal h4 { font-weight: 700; }

/* ปิดเอฟเฟกต์ตัวหนาแบบเกม (text-stroke) ให้ดูเรียบเป็นทางการ */
html.home-formal h1,
html.home-formal h2,
html.home-formal h3,
html.home-formal .btn,
html.home-formal .brand,
html.home-formal .stat-box .num {
  -webkit-text-stroke: 0 currentColor;
}

/* ===== แถบบนสุด ===== */
html.home-formal .topbar {
  background: #1e3a5f;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
html.home-formal .topbar .brand {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .2px;
}

/* ===== ส่วนแนะนำ (Hero) ===== */
html.home-formal .hero {
  text-align: center;
  padding: 34px 10px 20px;
}
html.home-formal .hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1e3a5f;
  line-height: 1.45;
}
html.home-formal .hero p {
  font-weight: 400;
  color: #5b6472;
  font-size: 1.05rem;
}

/* ===== การ์ด ===== */
html.home-formal .card {
  border-radius: 10px;
  border: 1px solid #dfe3e8;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

/* ===== แท็บเข้าสู่ระบบ / สมัครสมาชิก ===== */
html.home-formal .auth-tabs {
  background: #eef1f4;
  border-radius: 8px;
}
html.home-formal .auth-tab {
  border-radius: 8px;
  font-weight: 600;
}
html.home-formal .auth-tab.active {
  background: #1e3a5f;
  color: #fff;
}

html.home-formal .form-group label {
  font-weight: 500;
  color: #374151;
}
html.home-formal .form-group input,
html.home-formal .form-group select {
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  background: #fff;
  font-weight: 400;
}
html.home-formal .form-group input:focus,
html.home-formal .form-group select:focus {
  border-color: #1e3a5f;
}

/* ===== ปุ่ม ===== */
html.home-formal .btn {
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
}
html.home-formal .btn-primary {
  background: #1e3a5f;
  box-shadow: none;
}
html.home-formal .btn-primary:hover { background: #163049; }
html.home-formal .btn-secondary {
  border: 1px solid #1e3a5f;
  color: #1e3a5f;
}

/* ===== สถิติภาพรวม ===== */
html.home-formal .stat-box {
  border-radius: 8px;
  border: 1px solid #e3e7eb;
  box-shadow: none;
}
html.home-formal .stat-box .num { color: #1e3a5f; font-weight: 700; }
html.home-formal .stat-box .label { color: #6b7280; }

/* ===== กระดานผู้นำ ===== */
html.home-formal .podium-name { font-weight: 600; }
html.home-formal .rank-table th { color: #6b7280; }
html.home-formal .rank-badge { background: #eef1f4; color: #1e3a5f; }

html.home-formal .footer-note { color: #8a94a3; }