/* ==========================================================================
   auth-blob.css — bố cục trang xác thực + cầu nối cho linh vật feral-blob.

   BẢNG MÀU KHÔNG NẰM Ở ĐÂY. Nó ở assets/vendor/feral-blob/blob.css, chép nguyên
   từ tác giả (MIT). Đụng vào tệp vendor là mất khả năng cập nhật.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bố cục hai cột: linh vật bên trái, biểu mẫu bên phải
   -------------------------------------------------------------------------- */
.lp-auth-split {
  display: grid;
  /* Cột trái co giãn nhưng không bao giờ lấn cột nhập liệu. */
  grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 480px);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.lp-auth-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lp-auth-form {
  width: 100%;
  min-width: 0;
}

/*
 * MỘT CỘT KHI HẸP.
 * Ở điện thoại, hai cột nghĩa là ô nhập chỉ còn hơn trăm điểm ảnh. Xếp dọc, và
 * thu con blob lại — trên màn hình nhỏ thì bàn phím chiếm nửa dưới, linh vật to
 * chỉ đẩy ô nhập ra khỏi tầm nhìn.
 */
@media (max-width: 880px) {
  .lp-auth-split {
    grid-template-columns: minmax(0, 480px);
    gap: 12px;
  }

  .lp-blob {
    max-width: 150px;
  }
}

/* --------------------------------------------------------------------------
   Linh vật
   -------------------------------------------------------------------------- */
.lp-blob {
  display: block;
  width: 100%;
  /* Nhịp thở của bản gốc biên độ 3 đơn vị trên viewBox rộng 900. Thu nhỏ quá thì
     nó dưới một điểm ảnh và trông như đứng hình — 300px là chỗ chuyển động bắt
     đầu đọc được. */
  max-width: 300px;
  height: auto;
  /* Bản gốc để overflow:visible: tay và hiệu ứng vẽ tràn ra ngoài viewBox. */
  overflow: visible;
  margin: 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/*
 * BẢN GỐC ĐỔI BÓNG THEO :root[data-theme='light'], DỰ ÁN NÀY THÌ KHÔNG ĐẶT
 * THUỘC TÍNH ĐÓ — khung player bắt sáng/tối bằng prefers-color-scheme và chỉ đặt
 * data-theme khi người dùng chọn tay. Thiếu cầu nối này thì người dùng nền sáng
 * vẫn nhận bóng đổ của nền tối: một quầng tím đậm dưới chân blob trên nền giấy.
 *
 * Giá trị gốc của blob.css là #8e88a6 / #aaa4c0 — xám ngả TÍM, hợp bản gốc.
 * Đã xoay về xám ngả xanh cùng sắc 157° với da Sage bên dưới, giữ nguyên độ
 * sáng: một quầng tím dưới chân con blob xanh đọc ra là bóng của vật khác.
 *
 * Chế độ tối không cần khối này: trong SVG, --jelly-shadow lùi về
 * --jelly-outline, mà biến đó đã là xanh Sage rồi.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --jelly-shadow: #949a98;
    --jelly-shadow-light: #afb5b3;
  }
}

/*
 * Bản gốc dùng MotionConfig reducedMotion="user". Bản JS thuần xử lý phần đó
 * trong auth-blob.js (biến `reduce`); ở đây chỉ bỏ con trỏ tay, vì blob không
 * còn phản ứng khi bị chọc thì đừng mời người ta bấm.
 */
@media (prefers-reduced-motion: reduce) {
  .lp-blob {
    cursor: default;
  }
}

/*
 * BIẾN THỂ RỘNG — dùng cho trang đăng ký.
 *
 * Bố cục mặc định chia 0.85fr / tối đa 480px, hợp với biểu mẫu hai ô của trang
 * đăng nhập. Đăng ký có bảy trường: giữ nguyên tỉ lệ đó thì khung nhập cao gấp
 * đôi con blob, và cột trái thành một khoảng trống dài.
 *
 * Nên cột linh vật hẹp lại còn 0.55fr và cột nhập nới ra 620px. Cộng với lưới
 * hai cột bên trong (auth-form.css) thì hai cột cao xấp xỉ nhau.
 */
.lp-auth-split.is-wide {
  grid-template-columns: minmax(180px, 0.55fr) minmax(360px, 620px);
  max-width: 1160px;
  gap: clamp(20px, 4vw, 56px);
}

@media (max-width: 880px) {
  .lp-auth-split.is-wide {
    grid-template-columns: minmax(0, 620px);
  }
}

/* ==========================================================================
   DA SAGE — bảng màu riêng của dự án cho linh vật, và nhịp trôi màu.

   VÌ SAO ĐẶT Ở ĐÂY CHỨ KHÔNG SỬA VENDOR
   assets/vendor/feral-blob/blob.css là bản chép nguyên của tác giả (MIT). Sửa
   vào đó là mất khả năng cập nhật khi tác giả ra bản mới. Tệp này nạp SAU vendor
   nên chỉ cần khai lại biến là thắng — đúng cơ chế "skin" mà tác giả thiết kế:
   toàn bộ 7 gradient trong SVG đều đọc var(--jelly-*), không có màu viết cứng.

   CÁCH DỰNG BẢNG MÀU
   Mỗi màu giữ NGUYÊN độ sáng (L trong HSL) của bản tím gốc, chỉ xoay sắc về
   157° — sắc của --lp-accent #426759 — và hạ bão hoà. Giữ L là điều bắt buộc:
   cấu trúc sáng-tối (đỉnh sáng, thân giữa, đáy sâu, viền ngoài) chính là thứ
   tạo ra cảm giác khối. Xoay sắc mà kéo lệch L thì blob bẹp thành hình phẳng.

   Riêng MÁ và QUẦNG BỤNG giữ sắc hồng 340°. Hồng là bù sắc của xanh nên nó đọc
   ra là "ửng đỏ trên da"; nhuộm xanh nốt thì hai vệt đó biến mất vào thân.
   ========================================================================== */

/*
 * @property BẮT BUỘC PHẢI CÓ ĐỂ MÀU CHẠY MƯỢT.
 *
 * Biến CSS mặc định có kiểu "không rõ", mà thứ không rõ kiểu thì trình duyệt
 * KHÔNG nội suy được — nó nhảy thẳng sang giá trị mới ở mốc 50%. Khai syntax
 * '<color>' là nói cho trình duyệt biết đây là màu, và từ đó nó chuyển dần.
 *
 * Trình duyệt cũ bỏ qua khối này: màu vẫn đúng (initial-value bên dưới đã là
 * tông A), chỉ mất phần chuyển mượt. Hai tông lệch nhau nhiều nhất 25/765 mức
 * kênh nên bước nhảy đó gần như không nhận ra — đây là lý do chọn biên độ này
 * chứ không phải một dải cầu vồng.
 */
@property --jelly-body-top      { syntax: '<color>'; inherits: true; initial-value: #c8efe0; }
@property --jelly-body-mid      { syntax: '<color>'; inherits: true; initial-value: #93dabf; }
@property --jelly-body-deep     { syntax: '<color>'; inherits: true; initial-value: #7bcfaf; }
@property --jelly-body-rim      { syntax: '<color>'; inherits: true; initial-value: #aae3ce; }
@property --jelly-outline       { syntax: '<color>'; inherits: true; initial-value: #6ac6a3; }
@property --jelly-outline-light { syntax: '<color>'; inherits: true; initial-value: #85d5b7; }
@property --jelly-arm-light     { syntax: '<color>'; inherits: true; initial-value: #bcebd9; }
@property --jelly-arm-mid       { syntax: '<color>'; inherits: true; initial-value: #91d4bb; }
@property --jelly-arm-deep      { syntax: '<color>'; inherits: true; initial-value: #76c9aa; }

/*
 * HỘP GẮN PHẢI TỰ CÓ BỀ RỘNG — chỉ áp cho chỗ gắn trên trang xác thực, KHÔNG áp
 * cho hộp thoại đăng xuất (nó là lớp phủ toàn màn hình).
 */
[data-lp-blob] {
  /*
   *
   * SVG do component dựng chỉ mang viewBox, không có thuộc tính width/height —
   * tức là KHÔNG có kích thước nội tại. Quy tắc .lp-blob bên dưới cho nó
   * width:100%, mà 100% của một hộp cha rộng 0 vẫn là 0: hộp này là con của
   * .lp-auth-mascot (flex cột, align-items:center) nên nó co lại vừa nội dung,
   * còn nội dung lại đo theo nó. Vòng luẩn quẩn, kết quả là 0×0 và blob biến
   * mất hẳn — trang vẫn dựng bình thường nên rất dễ tưởng là lỗi màu.
   *
   * Bản port cũ không dính vì SVG kết xuất tĩnh có sẵn width/height.
   */
  width: 100%;
  max-width: 300px;
}

/*
 * BẢNG MÀU PHỦ CẢ HAI CHỖ DÙNG.
 *
 * Con blob trong hộp thoại đăng xuất KHÔNG nằm trong [data-lp-blob] — nó được
 * React dựng vào một lớp phủ riêng ở cuối <body>. Bảng màu chỉ khai trên
 * [data-lp-blob] thì blob ở đó rơi về bảng tím mặc định của vendor: hai con blob
 * hai màu trong cùng một ứng dụng.
 */
[data-lp-blob],
[data-lp-blob-dialog] {
  /* --- thân, viền, tay: sắc 157° --- */
  --jelly-body-top: #c8efe0;
  --jelly-body-mid: #93dabf;
  --jelly-body-deep: #7bcfaf;
  --jelly-body-rim: #aae3ce;
  --jelly-outline: #6ac6a3;
  --jelly-outline-light: #85d5b7;
  --jelly-arm-light: #bcebd9;
  --jelly-arm-mid: #91d4bb;
  --jelly-arm-deep: #76c9aa;

  /* --- má và quầng bụng: giữ hồng 340° --- */
  --jelly-cheek-light: #f7cddb;
  --jelly-cheek: #e79eb6;
  --jelly-cheek-deep: #d88ca5;
  --jelly-belly-glow: #f0c1d1;

  /* --- mắt: rất tối, ngả xanh theo --lp-ink #191C1B --- */
  --jelly-eye-light: #2c3f3a;
  --jelly-eye: #141e1c;
  --jelly-eye-deep: #0b1110;
  --jelly-eye-sparkle: #88cfb4;

  /*
   * NHỊP TRÔI MÀU — 11 giây một vòng.
   *
   * Đặt trên hộp chứa chứ không trên :root: biến kế thừa xuống SVG là đủ, mà
   * phạm vi hẹp thì không có nguy cơ một trang khác vô tình nhặt phải hoạt ảnh
   * này. Chu kỳ 11s cố tình LỆCH với nhịp thở 4,2s và 3,2s trong auth-blob.js —
   * ba chu kỳ không chia hết cho nhau thì tổ hợp không lặp lại theo mắt, và
   * blob không bao giờ nhìn ra "đang chạy một vòng lặp".
   */
  animation: lp-jelly-drift 11s ease-in-out infinite;
}

@keyframes lp-jelly-drift {

  0%,
  100% {
    --jelly-body-top: #c8efe0;
    --jelly-body-mid: #93dabf;
    --jelly-body-deep: #7bcfaf;
    --jelly-body-rim: #aae3ce;
    --jelly-outline: #6ac6a3;
    --jelly-outline-light: #85d5b7;
    --jelly-arm-light: #bcebd9;
    --jelly-arm-mid: #91d4bb;
    --jelly-arm-deep: #76c9aa;
  }

  /* Tông B: cùng L, cùng bão hoà, chỉ lệch sắc 16° về phía lam. Đủ để mắt thấy
     blob "thở màu", chưa đủ để thành một con blob màu khác. */
  50% {
    --jelly-body-top: #c8efea;
    --jelly-body-mid: #93dad2;
    --jelly-body-deep: #7bcfc5;
    --jelly-body-rim: #aae3dd;
    --jelly-outline: #6ac6bc;
    --jelly-outline-light: #85d5cc;
    --jelly-arm-light: #bcebe6;
    --jelly-arm-mid: #91d4cd;
    --jelly-arm-deep: #76c9c0;
  }
}

/*
 * Cùng chốt mà auth-blob.js dùng cho chuyển động hình học. Người đã báo hệ điều
 * hành là mình nhạy với chuyển động thì màu nhấp nháy cũng nằm trong nhóm gây
 * khó chịu đó — giữ nguyên tông A, đứng yên.
 */
@media (prefers-reduced-motion: reduce) {

  [data-lp-blob],
  [data-lp-blob-dialog] {
    animation: none;
  }
}

/*
 * BONG BÓNG THOẠI Ở NỀN SÁNG — cùng một cây cầu đã bắc cho bóng đổ ở trên.
 *
 * blob.css chỉ đổi bong bóng sang bản trắng dưới :root[data-theme='light'].
 * Dự án này KHÔNG đặt data-theme (khung player bắt sáng/tối bằng
 * prefers-color-scheme, chỉ đặt data-theme khi người dùng chọn tay), nên trên
 * nền sáng bong bóng giữ nguyên bản kính tối: một KHỐI ĐEN đặc nằm giữa hộp
 * thoại trắng.
 *
 * Giá trị chép đúng từ khối :root[data-theme='light'] .blob-bubble của blob.css.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .blob-bubble {
    --bubble-fill-top: rgba(255, 255, 255, .98);
    --bubble-fill-bottom: rgba(244, 243, 249, .98);
    --bubble-stroke-top: rgba(20, 16, 40, .14);
    --bubble-stroke-bottom: rgba(20, 16, 40, .05);

    color: #2b2735;
    text-shadow: none;
    filter: drop-shadow(0 8px 14px rgba(31, 22, 54, .12));
  }
}

/* ==========================================================================
   HỘP THOẠI XÁC NHẬN ĐĂNG XUẤT

   Nằm trong tệp này vì nó dùng chung con blob và bảng màu Sage ở trên. Nhưng
   khác với phần bố cục trang xác thực, khối này nạp trên MỌI trang có nút đăng
   xuất — xem bộ nạp trễ trong includes/player_foot.php.
   ========================================================================== */

.lp-blobdlg-scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--lp-invert) 62%, transparent);
  /* Trình duyệt không hiểu color-mix vẫn phải có nền tối, nếu không lớp phủ
     trong suốt hoàn toàn và hộp thoại trôi lơ lửng trên nội dung đọc được. */
  animation: lp-blobdlg-in .18s ease-out;
}

@supports not (background: color-mix(in srgb, red, blue)) {
  .lp-blobdlg-scrim { background: rgba(25, 28, 27, .62); }
}

/* Khoá cuộn nền: hộp thoại mở mà nền vẫn cuộn được thì con lăn chuột đi lạc. */
body.lp-blobdlg-open { overflow: hidden; }

.lp-blobdlg {
  position: relative;
  width: min(380px, 100%);
  padding: 28px 28px 24px;
  border-radius: var(--lp-radius);
  background: var(--lp-surface);
  border: 1px solid var(--lp-rule);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  text-align: center;
  animation: lp-blobdlg-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}

.lp-blobdlg-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--lp-surface-sub);
  color: var(--lp-ink-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.lp-blobdlg-x:hover { background: var(--lp-rule-soft); color: var(--lp-ink); }

/*
 * Blob trong hộp thoại nhỏ hơn ở trang đăng nhập. Ghi đè cả width lẫn max-width
 * vì .lp-blob khai width:100% — chỉ hạ max-width thì nó vẫn ăn hết bề ngang.
 */
.lp-blobdlg-face {
  width: 168px;
  max-width: 168px;
  margin: 4px auto 8px;
}

.lp-blobdlg-title {
  margin: 4px 0 6px;
  font-size: 21px;
  font-weight: 700;
  color: var(--lp-ink);
}

.lp-blobdlg-note {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-ink-faint);
}

.lp-blobdlg-acts {
  display: flex;
  gap: 10px;
}

/* Hai nút chia đều: nút phá huỷ KHÔNG được to hơn nút an toàn. */
.lp-blobdlg-acts > * { flex: 1; justify-content: center; }

@keyframes lp-blobdlg-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lp-blobdlg-pop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

  .lp-blobdlg-scrim,
  .lp-blobdlg {
    animation: none;
  }
}