/* --- General Styling --- */
body {
  font-family: "Montserrat", sans-serif;
  background-color: #000000;
  background-image: url("https://img.pikbest.com/back_our/20220329/bg/a84b65f0d6f69.png!sw800");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #d1d5db; /* Tăng độ sáng cho màu chữ mặc định (gray-300) */
}

/* --- Typography for a more horrifying feel --- */

.antialiased-title::before {
  content: "Án Tử";
  position: absolute;
  left: 0;
  right: 0;
  color: black; /* chữ chính */
  z-index: -1;
  font-size: 6rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(0, 0, 0, 0.7), 0 0 100px rgba(0, 0, 0, 0.6);
  filter: blur(48px);
  -webkit-text-stroke: 124px black;
}

.story-output {
  font-family: "Montserrat", sans-serif; /* Đổi font chữ truyện sang Montserrat */
  white-space: pre-wrap; /* Preserve line breaks from AI */
}

/* --- Custom Scrollbar with a blood-red theme --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #171717; /* Near black */
}
::-webkit-scrollbar-thumb {
  background: #991b1b; /* red-800 */
  border-radius: 4px;
  border: 1px solid #450a0a;
}
::-webkit-scrollbar-thumb:hover {
  background: #b91c1c; /* red-700 */
}

/* --- Red glowing spinner --- */
.spinner {
  border: 4px solid rgba(255, 0, 0, 0.2);
  border-left-color: #dc2626; /* red-600 */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@font-face {
  font-family: "Fz-Bloody"; /* tên bạn sẽ dùng trong CSS */
  src: url("../assets//font/Fz-Bloody.ttf") format("woff2"); /* tránh FOIT: cho trình duyệt hiển thị fallback trước */
}