/* ===== 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-title, .hm-cta {
    position: absolute;
    display: block;
    z-index: 3;
  }
  /* .hm-item TÁCH RIÊNG, cố ý KHÔNG có z-index: bất kỳ giá trị z-index nào
     cũng tạo stacking context, mà stacking context giam mix-blend-mode:screen
     của khung lửa lại trong chính ô đó — nền đen của gif không còn hoà được
     với cảnh phía sau nên hiện thành khối đen đặc che kín nhân vật.
     Bản desktop (style.css .item) đã tránh đúng bẫy này. */
  .hm-item {
    position: absolute;
    display: block;
  }
  .hm-btn img, .hm-cta img,
  .hm-logo, .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). */
  .hm-item {
    aspect-ratio: 1;
  }
  .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%; }
  /* `left: auto` BẮT BUỘC: các nút mang cả class desktop (`.hit--login` đặt
     `left: 86.6%`, `.hit--signup` đặt `left: 76%`) lẫn class mobile. Hai lớp
     cùng áp, mà khi có đủ `left` + `width` thì `left` thắng và `right` bị bỏ
     qua — nút "Đăng Nhập" văng ra ngoài mép phải 41px, người dùng mobile không
     bấm được. Đo thật 12/09/2026: rect right=431 trên khung 390. */
  .hm-btn    { width: 24%; right: 4%; left: auto; }
  .hm-btn--login  { top: 2%; }
  .hm-btn--signup { top: 7%; }

  /* --- 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%; 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: 10px; width: 24%;
    aspect-ratio: 106 / 33;
  }
  .hm-btn--logout img { width: 100%; height: 100%; }
  /* 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: 8%; width: 84%; }

  /* --- 2 CTA dưới cùng --- */
  .hm-cta { width: 42%; }
  .hm-cta--download { top: 82.8%; left: 5%; }
  .hm-cta--register { bottom: 3%; right: 5%; }
  .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; }
}