/* ===== Thiên Long Classic - Landing Page ===== */
/* Ghép từ các lớp SVG rời, định vị theo % của khung nền 1920:1014 */
:root {
  --gold: #f5c96b;
  --gold-glow: rgba(245, 201, 107, 0.75);
  --dark: #14100c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--dark);
  font-family: "Segoe UI", Roboto, sans-serif;
}

/* ===== Hero stage ===== */
.hero {
  display: flex;
  justify-content: center;
  margin-top: -2vh; /* dịch cả khối hero lên một chút */
  background: radial-gradient(circle at 50% 40%, #2a1d12 0%, #0a0705 100%);
}

/* Khung giữ đúng tỉ lệ ảnh nền; mọi lớp con phủ tuyệt đối theo % */
.hero__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 1014;
  /* Phủ kín màn hình khi khung cao hơn tỉ lệ 1920:1014 cho phép.
     Không có dòng này thì màn cao (2044x1782, tỉ lệ 1.15) để lộ ~39% dải đen
     dưới hero — landing chỉ có mỗi hero, không có gì lấp chỗ đó.
     Cộng bù 2vh vì `.hero` đẩy cả khối lên bằng margin âm cùng số. */
  min-height: calc(100vh + 2vh);
  line-height: 0;
  overflow: hidden;
}

/* Nền cảnh + nhân vật: lấp đầy khung */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* ===== Lớp phủ dùng chung ===== */
.layer {
  position: absolute;
  display: block;
}
.layer img { width: 100%; height: 100%; display: block; }

/* Gradient đen mép trên */
.layer--header { top: 0; left: 0; width: 100%; height: 17%; z-index: 5; pointer-events: none; }

/* Vật phẩm bay: mỗi item là khung vuông chứa khung lửa (nền) + ảnh vật phẩm.
   width tính theo % khung; transform căn giữa quanh toạ độ.
   aspect-ratio 1 để khung lửa (GIF vuông) hiển thị đúng tỉ lệ. */
/* Căn giữa bằng margin âm thay cho transform + bỏ z-index:
   tránh tạo stacking context để mix-blend-mode:screen của khung lửa
   hoà trộn được với cảnh nền phía sau (làm mất nền đen của GIF).
   margin % luôn tính theo chiều rộng khung cha, nên -4% = nửa cạnh ô vuông 8%. */
.item {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  margin-left: -4%;
  margin-top: -4%;
  pointer-events: none;
}
/* Ảnh vật phẩm nằm giữa ô, lọt vào vùng trong của khung */
.item__img {
  position: absolute; top: 50%; left: 50%;
  width: 58%; height: 58%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(245, 201, 107, 0.35));
}
/* Khung lửa đè lên trên vật phẩm; screen làm nền đen của GIF thành trong suốt.
   Phóng to (scale) để đường viền lửa ôm vừa quanh ảnh vật phẩm. */
.item__frame {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%) scale(2);
  mix-blend-mode: screen;
  pointer-events: none;
}
.item--khoa   { left: 11.5%; top: 29%; }
.item--scroll { left: 18%;   top: 48%; }
.item--armor  { left: 75.5%; top: 19%; }
.item--swirl  { left: 79%;   top: 38%; }
.item--rune   { left: 69%;   top: 52%; }

/* Logo góc trái */
.layer--logo { top: 4.5%; left: 1.2%; width: 13.7%; z-index: 10; }

/* Hai dải lịch Alpha/Open Beta */
.layer--schedule { top: 8.5%; left: 20%; width: 8.7%; z-index: 8; }

/* Tiêu đề chính căn giữa */
.layer--title { top: 60%; left: 27.5%; width: 45%; z-index: 8; }

/* Chào đại hiệp góc phải trên (chữ HTML, tên tài khoản động) */
.layer--greeting {
  top: 6%; left: 70%; width: 17.5%; z-index: 10;
  margin-top: 8px; /* dịch xuống 8px */
  color: #fff;
  font-weight: 800;
  font-size: clamp(13px, 1.1vw, 20px);
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.layer--greeting__name { color: var(--gold); }

/* Menu dọc phải: nền cuộn + 4 nút ảnh riêng đè lên */
/* Menu căn giữa theo chiều dọc khung: top 50% rồi kéo lên nửa chiều cao chính nó */
.layer--menu { top: 50%; left: 86.5%; width: 10.4%; z-index: 10000; transform: translateY(-50%); }
/* Nền cuộn: quyết định chiều cao container (các nút đặt tuyệt đối theo %) */
.menu__bg { width: 100%; height: auto; display: block; pointer-events: none; }
/* Nút menu: ảnh riêng, xếp dọc, căn ngang giữa nền cuộn */
.menu-btn {
  position: absolute;
  left: 50%;
  /* 82%, KHÔNG phải 92%: phần GIẤY của menu-bg.svg chỉ rộng 172/196 = 87.8%
     khung (đo 12/09/2026, mép cuộn hai bên chiếm phần còn lại). Để 92% thì nút
     lòi ra khỏi giấy 4.2px mỗi bên, đè lên mép cuộn. 82% chừa ~5px lề thở. */
  width: 82%;
  transform: translateX(-50%);
  display: block;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.menu-btn img { width: 100%; height: auto; display: block; }
.menu-btn:hover { transform: translateX(-50%) scale(1.03); filter: brightness(1.06); }
/* Vị trí dọc 4 nút, % chiều cao nền cuộn.
   Vùng giấy đặt được nút là 8%..76% (đo 12/09/2026: cuộn phủ 0..82.4%, trừ
   thanh ngang trên và dưới). Nút cao 11.9% nên 4 nút chiếm 47.6%, còn 20.4%
   chia đều thành 5 khe 4.08% — lề trên, dưới và giữa các nút bằng nhau. */
.menu-btn--1 { top: 12.1%; }
.menu-btn--2 { top: 28.1%; }
.menu-btn--3 { top: 44%; }
.menu-btn--4 { top: 60%; }

/* ===== Nút bấm dùng chính SVG làm ảnh ===== */
.hit {
  border: none; background: transparent; cursor: pointer; padding: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
  z-index: 12;
}
.hit img { pointer-events: none; }
.hit:hover { transform: translateY(-2px); filter: drop-shadow(0 0 12px var(--gold-glow)); }
.hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Đăng ký: đặt cạnh trái nút Đăng nhập (SVG tỉ lệ 185:56) */
.hit--signup { top: 4.8%; left: 76%; width: 9.6%; aspect-ratio: 185 / 56; }
.hit--signup img { height: 100%; width: auto; }

/* Đăng nhập: đặt cạnh trái nút đăng xuất (SVG tỉ lệ 185:56) */
.hit--login { top: 4.8%; left: 86.6%; width: 9.6%; aspect-ratio: 185 / 56; }
.hit--login img { height: 100%; width: auto; }

/* Đăng xuất góc phải trên (nút mới, tỉ lệ 106:33) */
.hit--logout { top: 4.8%; left: 88.3%; width: 9.6%; aspect-ratio: 106 / 33; }
.hit--logout img { width: 100%; height: 100%; }

/* ===== Trạng thái đăng nhập =====
   Mặc định (chưa đăng nhập): hiện nút Đăng nhập, ẩn lời chào + Đăng xuất.
   Khi đăng nhập/đăng ký xong: thêm class .is-logged-in vào .hero__stage
   (qua JS/backend) để đảo lại. */
.layer--greeting,
.hit--logout { display: none; }
.hero__stage.is-logged-in .hit--login,
.hero__stage.is-logged-in .hit--signup { display: none; }
.hero__stage.is-logged-in .layer--greeting,
.hero__stage.is-logged-in .hit--logout { display: block; }

/* CTA chính hàng dưới */
.hit--download { top: 82%; left: 35.8%; width: 14.5%; }
.hit--register { top: 82%; left: 51%;   width: 14.5%; }
.hit--code     { top: 84.5%; left: 66%;  width: 12.3%; }

/* Nút hỗ trợ tròn dưới phải (dịch lên trên 20px) */
.hit--support { top: 78%; left: 87.5%; width: 10.5%; z-index: 10000; transform: translateY(-20px); }