html {
  font-size: 13px;
  font-weight: 400;
  font-family: "Anuphan", serif;
  -webkit-font-smoothing: antialiased;
}

body.page-loading {
  margin: 0;
  height: 100%;
  overflow: hidden;
  transition: none !important;
}

.splash-screen {
  display: none;
}

.page-loading .splash-screen {
  position: absolute;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Anuphan", serif;
  background-color: #edf2f4; /* พื้นหน้าของธีม flood */
}
html[data-bs-theme='dark'] .page-loading .splash-screen {
  background-color: #071219;
}

/* ตัวโหลดแบบเดียวกับ RainLoading.tsx (หน้า splash แสดงก่อน JS โหลด จึงใช้ React component ไม่ได้) */
.splash-box {
  width: min(260px, calc(100% - 48px));
  text-align: center;
}
.splash-logo {
  display: block;
  width: min(200px, 80%);
  height: auto;
  margin: 0 auto 10px;
  animation: splash-breathe 2.4s ease-in-out infinite;
}
html[data-bs-theme='dark'] .splash-logo {
  filter: brightness(1.35) saturate(1.1);
}
.splash-screen .loading-text {
  margin: 0 0 12px;
  color: #5a7384;
  font-size: 0.88rem;
  font-weight: 400;
}
html[data-bs-theme='dark'] .splash-screen .loading-text {
  color: #7f98a6;
}
.splash-bar {
  position: relative;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 52, 70, 0.17);
}
html[data-bs-theme='dark'] .splash-bar {
  background: rgba(150, 205, 232, 0.17);
}
.splash-bar > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: #1f6f99;
  animation: splash-run 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
html[data-bs-theme='dark'] .splash-bar > div {
  background: #2d86b3;
}
@keyframes splash-breathe {
  0%, 100% { opacity: 0.88; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}
@keyframes splash-run {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; }
  .splash-bar > div { animation: none; width: 100%; opacity: 0.6; }
}