/* ===== Landing Mobile - Thiên Long Classic =====
   Bố cục dọc riêng cho điện thoại. Ẩn mặc định; chỉ hiện ở màn hình nhỏ.
   Nền mobile-bg (393×851) định khung; mọi layer con phủ tuyệt đối theo %.
   Toạ độ % ước lượng theo mẫu design, tinh chỉnh khi xem thực tế. */

/* Ẩn mặc định (desktop). Chỉ bật trong media query bên dưới. */
.hero-mobile { display: none; }
/* Panel popup mobile: ẩn ở desktop (desktop dùng .login-modal__panel) */
.lm { display: none; }

@media (max-width: 768px) {
  /* Ẩn landing desktop, hiện landing mobile */
  .hero { display: none; }
  .hero-mobile {
    display: block;
    background: #0a0705;
  }

  /* Khung giữ tỉ lệ nền dọc; căn giữa, giới hạn bề ngang cho màn lớn */
  .hero-mobile__stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 393 / 851;
    overflow: hidden;
    line-height: 0;
  }

  /* Nền cảnh dọc lấp đầy khung */
  .hm-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    user-select: none;
  }
  /* Gradient đen mép trên */
  .hm-header {
    position: absolute; top: 0; left: 0;
    width: 100%; height: auto;
    z-index: 2; pointer-events: none;
  }

  /* Các layer ảnh dùng chung: đặt tuyệt đối, ảnh con lấp đầy */
  .hm-logo, .hm-btn, .hm-schedule, .hm-item, .hm-title, .hm-cta {
    position: absolute;
    display: block;
    z-index: 3;
  }
  .hm-btn img, .hm-cta img,
  .hm-logo img, .hm-schedule, .hm-title { width: 100%; height: auto; display: block; }

  /* Mỗi vật phẩm: khung vuông chứa ảnh PNG (giữa) + khung lửa gif đè lên.
     Nền sáng radial phía sau để screen-blend xóa sạch nền đen của gif
     (nền cảnh mobile tối nên phải tự tạo vùng sáng, tránh các ô đen lớn). */
  /* z-index auto: không tạo stacking context để khung lửa screen-blend được với nền cảnh
     (nếu có z-index, nền đen của gif hiện thành ô đen) */
  .hm-item {
    aspect-ratio: 1;
    z-index: auto;
  }
  .hm-item__img {
    position: absolute; top: 50%; left: 50%;
    width: 58%; height: 58%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(245, 201, 107, 0.35));
    z-index: 1; /* ảnh vật phẩm đè lên trên khung lửa */
  }
  /* Khung lửa gif (động); screen-blend khử nền đen của gif. Giữ scale(2). */
  .hm-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;
  }

  /* --- Header: logo trái + 2 nút phải (thẳng hàng phải, xếp dọc không chồng) --- */
  .hm-logo   { top: 1.5%; left: 3%;  width: 30%; }
  .hm-btn    { width: 24%; right: 4%; }
  .hm-btn--login  { top: 2%; margin-right: 100px; }
  .hm-btn--signup { top: 2%; }

  /* --- Lời chào + nút đăng xuất mobile (ẩn mặc định, hiện khi đăng nhập) --- */
  .hm-greeting, .hm-btn--logout { display: none; }
  .hm-greeting {
    position: absolute;
    top: 3.7%; left: 3%;
    right: calc(28% + 10px); /* cách mép trái nút đăng xuất (right 4% + width 24%) 10px */
    color: #fff;
    font-weight: 800;
    font-size: clamp(11px, 3vw, 15px);
    text-align: right;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    z-index: 3;
  }
  .hm-greeting__name { color: var(--gold); }
  .hm-btn--logout {
    top: 2%; right: 4%; width: 24%;
    aspect-ratio: 106 / 33;
  }
  .hm-btn--logout img { width: 100%; height: 100%; }

  /* Logo + 4 phần tử góc trên (Trang Chủ, Đăng Ký, lời chào, Đăng Xuất) cố định theo màn hình -> bám theo khi cuộn.
     fixed tính % theo màn hình chứ không theo khung, nên quy đổi về bề ngang khung W = min(100vw, 480px):
     top 2% chiều cao khung = W*851/393*0.02 ≈ W*0.0433; lề trái/phải khung = (100vw - W)/2. */
  /* Logo: top 1.5% chiều cao khung = W*851/393*0.015 ≈ W*0.0325; left 3%, width 30% bề ngang khung */
  .hm-logo {
    position: fixed;
    top: calc(min(100vw, 480px) * 0.0325);
    left: calc((100vw - min(100vw, 480px)) / 2 + min(100vw, 480px) * 0.03);
    width: calc(min(100vw, 480px) * 0.30);
    z-index: 10002;
  }
  .hm-btn--login, .hm-btn--signup, .hm-btn--logout {
    position: fixed;
    top: calc(min(100vw, 480px) * 0.0433);
    right: calc((100vw - min(100vw, 480px)) / 2 + min(100vw, 480px) * 0.04);
    width: calc(min(100vw, 480px) * 0.24);
    z-index: 10002;
  }
  .hm-greeting {
    position: fixed;
    top: calc(min(100vw, 480px) * 0.0801); /* = 3.7% chiều cao khung */
    left: calc((100vw - min(100vw, 480px)) / 2 + min(100vw, 480px) * 0.03);
    right: calc((100vw - min(100vw, 480px)) / 2 + min(100vw, 480px) * 0.28 + 10px);
    z-index: 10002;
  }
  /* Toggle: đăng nhập rồi thì ẩn 2 nút signup/login, hiện lời chào + đăng xuất */
  .hero-mobile__stage.is-logged-in .hm-btn--signup,
  .hero-mobile__stage.is-logged-in .hm-btn--login { display: none; }
  .hero-mobile__stage.is-logged-in .hm-greeting { display: block; }
  .hero-mobile__stage.is-logged-in .hm-btn--logout { display: block; }

  /* --- Dải lịch Alpha/Open Beta (căn giữa ngang landing) --- */
  .hm-schedule { top: 11%; left: 50%; transform: translateX(-50%); width: 26%; }

  /* --- 5 vật phẩm rải quanh nhân vật --- */
  .hm-item--1 { top: 8%;  right: 6%;  width: 22%; margin-top: 50px; } /* trên phải (áo), dịch xuống 50px */
  .hm-item--2 { top: 13%; right: 22%; width: 20%; margin-top: 50px; } /* khoá, dịch xuống 50px */
  .hm-item--3 { top: 27%; left: 6%;   width: 20%; } /* trái (cuộn) */
  .hm-item--4 { top: 33%; left: 20%;  width: 18%; margin-left: 35px; } /* xoáy (dịch phải 35px) */
  .hm-item--5 { top: 30%; left: 4%;   width: 17%; margin-top: 60px; } /* rune xanh (dịch xuống 60px) */

  /* --- Tiêu đề chính (gồm phụ đề) --- */
  .hm-title { top: 55%; left: 3%; width: 94%; }

  /* --- 2 CTA dưới cùng --- */
  .hm-cta { width: 42%; }
  /* Dịch lên sát dưới tiêu đề (tiêu đề kết thúc ~66.5% chiều cao khung) */
  .hm-cta--download { top: 69%; left: 5%; }
  .hm-cta--register { top: 68.1%; right: 5%; } /* ảnh cao hơn (có huy hiệu Báo danh) -> đáy thẳng hàng nút Tải Game */
  .hm-cta:active { filter: brightness(1.1); }

  /* ===== Popup Đăng nhập / Đăng ký MOBILE ===== */
  /* Ẩn panel desktop trong cả 2 popup, hiện panel mobile */
  #loginModal .login-modal__panel,
  #loginModal .login-modal__gifts,
  #registerModal .login-modal__panel,
  #registerModal .login-modal__gifts,
  #registerDoneModal .login-modal__panel,
  #registerDoneModal .login-modal__gifts { display: none; }
  .lm { display: block; width: 100%; }

  /* Khung cuộn dọc mobile (tỉ lệ 393:597) */
  .lm__panel {
    position: relative;
    width: 92vw;
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 393 / 597;
  }
  .lm__scroll {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; user-select: none;
  }
  .lm__close {
    position: absolute; top: 4%; right: 6%;
    width: 30px; height: 30px;
    border: none; border-radius: 50%;
    background: rgba(125, 31, 16, 0.9);
    color: #ffe9c2; font-size: 18px; line-height: 1;
    cursor: pointer; z-index: 2;
  }
  /* Nút đóng (×) popup đăng nhập mobile kéo xuống 75px */
  #loginModal .lm__close { margin-top: 75px; }

  /* Nội dung nằm trong vùng giấy. top lớn hơn để đẩy nhóm trên xuống;
     quà giữ ở đáy nhờ margin-top:auto (bottom cố định). */
  .lm__content {
    position: absolute;
    top: 19%; left: 11%; right: 11%; bottom: 6%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Tiêu đề khung lửa + chữ ĐĂNG NHẬP đè lên */
  .lm__title {
    position: relative;
    width: 58%;
    display: flex; align-items: center; justify-content: center;
  }
  .lm__title img { width: 100%; height: auto; display: block; }

  /* Phụ đề */
  .lm__subtitle { width: 82%; height: auto; margin-top: 2.5%; }

  /* Form: nhãn trái + ô nhập full width bên dưới (theo mẫu) */
  .lm__form {
    width: 92%;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
  }
  .lm__label {
    align-self: flex-start;
    font-weight: 700;
    color: #6b4a1f;
    font-size: clamp(13px, 3.4vw, 16px);
    margin-bottom: 5px;
  }
  .lm__input {
    width: 100%;
    border: 1px solid #d8c39a;
    border-radius: 4px;
    background: #fffdf8;
    padding: 9px 12px;
    font-size: 16px;
    color: #333;
    outline: none;
    margin-bottom: 9px;
  }
  .lm__input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,201,107,0.4); }

  /* Nút Đăng Nhập (ảnh SVG) */
  .lm__submit {
    align-self: center;
    margin-top: 1%;
    border: none; padding: 0;
    background: url("../assets/svg/login-mobile/lm-btn-submit.svg?v=86fbd1e8") center/contain no-repeat;
    width: clamp(120px, 40vw, 170px);
    aspect-ratio: 106 / 33;
    cursor: pointer;
  }
  .lm__submit:active { filter: brightness(1.08); }

  /* Gợi ý */
  .lm__hint {
    margin-top: 2.5%;
    color: #734A36;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 600;
    text-align: center;
  }

  /* 2 nút social */
  .lm__social {
    display: flex;
    gap: 16px;
    margin-top: 2.5%;
  }
  .lm__social-btn {
    display: block;
    width: clamp(110px, 34vw, 150px);
    aspect-ratio: 107 / 32;
    cursor: pointer;
  }
  .lm__social-btn img { width: 100%; height: 100%; display: block; }

  /* Hàng quà dưới cùng trong khung cuộn */
  .lm__gifts {
    display: flex;
    gap: clamp(2px, 1vw, 8px);
    margin-top: auto;
    justify-content: center;
    width: 100%;
  }

  /* --- Popup Đăng ký mobile: 4 ô -> khung cao hơn + form gọn hơn --- */
  .lm__panel--register { aspect-ratio: 393 / 660; }
  /* Nội dung thu vào trong mép giấy (chừa 2 trục cuộn).
     top 123px = khoảng cách từ đỉnh panel tới title (title là phần tử đầu). */
  .lm__panel--register .lm__content {
    top: 123px; left: 13%; right: 13%; bottom: 7%;
    padding-top: 0;
  }
  .lm__panel--register .lm__label { margin-bottom: 1px; font-size: clamp(12px, 3.2vw, 15px); }
  .lm__panel--register .lm__input { margin-bottom: 2px; padding: 6px 12px; }
  /* Thu hẹp khoảng cách title -> subtitle -> form */
  .lm__panel--register .lm__subtitle { margin-top: 1%; }
  .lm__panel--register .lm__form { margin-top: 1.5%; }
  /* Nút đóng (×) kéo xuống 95px */
  .lm__panel--register .lm__close { margin-top: 95px; }
  /* Nút Đăng Ký (ảnh SVG riêng) — thu nhỏ + đẩy cả cụm dưới xuống 30px */
  .lm__submit--register {
    background: url("../assets/svg/register-mobile/rm-btn-submit.svg?v=cd1425c2") center/contain no-repeat;
    width: clamp(100px, 32vw, 140px);
    margin-top: 10px;
  }
  .lm__panel--register .lm__hint {
    font-size: clamp(12px, 3.4vw, 15px);
    margin-top: 2%;
  }
  .lm__panel--register .lm__social {
    gap: 12px;
    margin-top: 2%;
  }
  .lm__panel--register .lm__social-btn {
    width: clamp(95px, 30vw, 130px);
  }

  /* ===== Popup Đăng ký HOÀN TẤT ===== */
  /* Không có form nên nội dung bắt đầu cao hơn popup đăng ký */
  .lm__panel--done .lm__content { top: 12%; }
  .lm__panel--done .lm__close { margin-top: 100px; }
  /* Khung tiêu đề kéo xuống 75px */
  .lm__panel--done .lm__title { margin-top: 75px; }
  /* Lời chúc mừng (chữ đỏ, canh giữa) */
  .lm__done-msg {
    margin-top: 20px;
    color: #b7371f;
    font-weight: 700;
    font-size: clamp(12px, 3.3vw, 15px);
    line-height: 1.5;
    text-align: center;
  }
  /* Ô giftcode: nền trắng + mã + nút copy */
  .lm__code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4%;
    width: 100%;
  }
  .lm__code-value {
    flex: 1;
    background: #fffdf8;
    border: 1px solid #d8c39a;
    border-radius: 4px;
    padding: 9px 10px;
    color: #2f6ad0;
    font-weight: 800;
    font-size: clamp(14px, 4.2vw, 19px);
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lm__code-copy {
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    display: flex;
  }
  .lm__code-copy img { width: 22px; height: auto; display: block; }
  .lm__code-copy:active { filter: brightness(1.2); }
  /* Lời nhắc follow (chữ đen đậm, canh giữa) */
  .lm__done-note {
    margin-top: 4%;
    color: #333;
    font-weight: 700;
    font-size: clamp(12px, 3.3vw, 15px);
    line-height: 1.5;
    text-align: center;
  }
  /* Hàng quà popup hoàn tất: kéo lên 40px */
  .lm__panel--done .lm__gifts { margin-bottom: 40px; }
}