/* ===== 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;
  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: cố định theo màn hình (bám theo khi cuộn), đè lên nền topmenu (z-index 10002 > 10001).
   fixed tính % theo màn hình, nên quy đổi về bề ngang khung W = min(100vw, 1920px), tỉ lệ 1920:1014:
   top 4.5% chiều cao khung = W*0.02377 (trừ 2vh do .hero kéo lên); left 1.2% / width 13.7% bề ngang khung. */
.layer--logo {
  position: fixed;
  top: calc(min(100vw, 1920px) * 0.02377 - 2vh);
  left: calc((100% - min(100%, 1920px)) / 2 + min(100%, 1920px) * 0.012); /* % = bề ngang màn hình trừ thanh cuộn, khớp khung */
  width: calc(min(100%, 1920px) * 0.137);
  z-index: 10002;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease;
}
/* Khi cuộn (topmenu có nền đen cao 65px): co logo còn cao 60px, giữ tỉ lệ ảnh 264:182,
   cách trên 5px (đáy 65px = khít đáy thanh menu), cách trái 20px.
   .hero đứng ngay sau .topmenu nên dùng ~ để bắt trạng thái cuộn. */
.topmenu--scrolled ~ .hero .layer--logo {
  top: 5px;
  left: 20px;
  width: calc(60px * 264 / 182);
}

/* 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):
   cố định theo màn hình, nằm bên trái nút Đăng xuất, cao bằng nút để chữ căn giữa dọc */
.layer--greeting {
  position: fixed;
  top: 17px;
  right: calc(2vw + clamp(96px, 9.6vw, 150px) + 12px);
  height: calc(clamp(96px, 9.6vw, 150px) * 33 / 106);
  line-height: calc(clamp(96px, 9.6vw, 150px) * 33 / 106);
  z-index: 10002;
  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 { position: fixed; top: 50%; left: auto; right: 7px; width: clamp(140px, 10.4vw, 200px); 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%;
  width: 92%;
  margin-top: -25px; /* dịch 4 nút lên trên 25px */
  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) — khớp mẫu design */
.menu-btn--1 { top: 14%; }
.menu-btn--2 { top: 30.5%; }
.menu-btn--3 { top: 47%; }
.menu-btn--4 { top: 63.5%; }

/* ===== 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ý + Đăng nhập: cố định góc phải trên, bám theo khi cuộn, đè lên nền topmenu
   (z-index 10002 > .topmenu 10001). SVG tỉ lệ 185:56. */
.hit--signup,
.hit--login {
  position: fixed;
  top: 17px;
  left: auto;
  width: clamp(96px, 9.6vw, 150px);
  aspect-ratio: 185 / 56;
  z-index: 10002;
}
.hit--signup { right: calc(2vw + clamp(96px, 9.6vw, 150px) + 12px); }
.hit--login { right: 2vw; }
.hit--signup img,
.hit--login img { height: 100%; width: auto; }

/* Đăng xuất góc phải trên (nút mới, tỉ lệ 106:33): cố định như nút Đăng nhập, đè lên nền topmenu */
.hit--logout { position: fixed; top: 17px; right: 2vw; left: auto; width: clamp(96px, 9.6vw, 150px); aspect-ratio: 106 / 33; z-index: 10002; }
.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: cố định theo màn hình (di chuyển khi cuộn), cách dưới 85px, phải 7px */
.hit--support {
  position: fixed;
  bottom: 85px;
  right: 7px;
  top: auto;
  left: auto;
  width: clamp(90px, 10vw, 140px);
  z-index: 10000;
}
.hit--support img { height: auto; }

/* ===== Sticky menu trên đầu ===== */
/* Thanh cố định luôn hiện khi cuộn; nền tối mờ nhẹ để nổi chữ trên hero */
.topmenu {
  position: fixed;
  top: 17px;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(10px, 1.4vw, 16px) clamp(20px, 4vw, 60px);
  transition: background 0.2s ease;
}
/* Khi cuộn xuống: nền đen mờ 80%, kéo dài lên sát viền trên (bù 17px vào padding) */
.topmenu--scrolled {
  top: 0;
  padding-top: calc(clamp(10px, 1.4vw, 16px) + 17px);
  padding-bottom: calc(clamp(10px, 1.4vw, 16px) + 15px);
  background: rgba(0, 0, 0, 0.8);
}
/* Danh sách link điều hướng */
.topmenu__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 0; /* giữ chiều cao thanh như khi còn nằm trong .hero__stage */
}
.topmenu__links a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.topmenu__links a:hover { color: var(--gold, #f4c95d); }

/* Nút ☰: chỉ hiện ở mobile */
.topmenu__toggle { display: none; }

/* Mobile: thu menu vào nút ☰ góc phải trên, bấm mới xổ danh sách link */
@media (max-width: 768px) {
  /* Nút ☰ nằm dưới nút Đăng Ký / Đăng Xuất, căn thẳng mép phải với các nút đó.
     Khung mobile rộng min(100vw, 480px), tỉ lệ 393:851; nút Đăng Ký top 2% (của chiều cao) -> đáy nút ≈ 11.35% bề ngang khung; +15px = khoảng cách tới nút ☰ */
  .topmenu,
  .topmenu--scrolled {
    top: calc(min(100vw, 480px) * 0.1135 + 15px);
    left: auto;
    right: calc((100vw - min(100vw, 480px)) / 2 + min(100vw, 480px) * 0.04);
    padding: 0;
    background: none;
  }
  .topmenu__toggle {
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .topmenu__links { display: none; }
  .topmenu.is-open .topmenu__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 180px;
    padding: 6px 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.9);
  }
  .topmenu__links a { display: block; padding: 12px 18px; font-size: 15px; line-height: 1.2; }
}