/* giao_dien.css — Giao diện tiếng Việt, tối giản, đọc được trên nền đen.
   Mọi bảng đều nằm nổi trên khung vẽ (position: fixed) nên không chiếm chỗ. */

:root {
  /* Báo cho trình duyệt biết trang này nền tối. Nhờ vậy những thứ do HỆ ĐIỀU
     HÀNH vẽ chứ không phải CSS vẽ — danh sách xổ xuống của thẻ <select>, nút
     tăng giảm của ô số, thanh cuộn — cũng tự chuyển sang tông tối. Thiếu dòng
     này thì danh sách xổ xuống có nền trắng mà chữ lại màu sáng, không đọc được. */
  color-scheme: dark;

  --nen-bang: rgba(6, 10, 20, 0.62);
  --nen-chon: #121d30;
  --vien: rgba(140, 170, 220, 0.22);
  --chu: #dfe7f5;
  --chu-mo: #93a2bd;
  --nhan: #7f93b5;
  --nhan-manh: #8ec5ff;
}

* { box-sizing: border-box; }

/* Thẻ nào mang thuộc tính hidden thì phải ẩn THẬT.
   Cần dòng này vì bên dưới có những quy tắc đặt display: flex cho chính các
   thẻ hay bị ẩn (#doi-vi-tri, #hang-tuy-chon). Quy tắc theo id hoặc lớp thắng
   quy tắc [hidden] mặc định của trình duyệt, thành ra thẻ "đã ẩn" vẫn chiếm
   chỗ — trên điện thoại ngốn mất gần 200 điểm ảnh chiều cao. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; color: var(--chu); overflow: hidden;
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#khung-ve {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; cursor: grab;
}
#khung-ve:active { cursor: grabbing; }

/* ---------- Nhãn tên và vòng đánh dấu ---------- */
/* Lớp này phủ kín khung vẽ nhưng KHÔNG bắt chuột (pointer-events: none),
   nếu không thì kéo xoay hướng nhìn sẽ bị nhãn chắn mất. */
#lop-nhan {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  overflow: hidden;
}
.danh-dau {
  position: absolute; top: 0; left: 0;
  /* transform do JavaScript đặt: dời tới đúng chỗ vật trên màn hình */
  will-change: transform;
}
.danh-dau .vong {
  position: absolute; display: block;
  border: 1px solid currentColor; border-radius: 50%;
  opacity: .55;
}
.danh-dau .ten {
  position: absolute; top: -0.75em; white-space: nowrap;
  font-size: 11.5px; letter-spacing: .2px;
  /* Viền tối quanh chữ để đọc được cả khi nhãn đè lên vật sáng */
  text-shadow: 0 0 3px #000, 0 0 6px #000;
}

/* ---------- Khung Đĩa Vàng ---------- */
#dia-vang, #ve-trang {
  position: fixed; z-index: 20; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(42em, calc(100vw - 24px));
  max-height: min(80vh, 760px); overflow-y: auto;
  padding: 18px 20px; border-radius: 12px;
  background: rgba(6, 10, 20, 0.93);
  border: 1px solid rgba(214, 178, 90, .45);
  backdrop-filter: blur(10px);
}
#dia-vang h2, #ve-trang h2 {
  margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #e8c877;
}
#dia-vang h3, #ve-trang h3 {
  margin: 14px 0 4px; font-size: 13px; color: var(--nhan-manh);
}
#dia-vang .gioi-thieu, #ve-trang p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; }
#nut-dong-dia, #nut-dong-ve-trang {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; padding: 0; line-height: 1;
}

/* Bảng "những chỗ không đúng thật" — phần sòng phẳng nhất của trang, nên
   để dễ đọc chứ đừng giấu vào chữ nhỏ. */
.ds-that-gia { margin: 6px 0 14px; padding-left: 1.3em; font-size: 12.5px; line-height: 1.6; }
.ds-that-gia li { margin-bottom: 7px; }
#ve-trang .chu-ky {
  margin: 16px 0 0; padding-top: 11px; border-top: 1px solid var(--vien);
  font-size: 12.5px; color: var(--chu);
}
#ve-trang .phu { margin: 0 0 4px; font-size: 11.5px; color: var(--chu-mo); }
.hang-am-luong {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--nhan); margin-bottom: 12px;
}
#am-luong { flex: 0 0 10em; }

/* Lời chào tiếng Việt — phần đáng chú ý nhất của khung này */
.muc-chao {
  padding: 11px 13px; margin-bottom: 12px; border-radius: 9px;
  background: rgba(232, 200, 119, .07);
  border: 1px solid rgba(214, 178, 90, .3);
}
.muc-chao .loi-chao {
  margin: 0 0 4px; font-size: 15px; color: #ffe9b8; font-style: italic;
}
#dia-vang .phu { margin: 0; font-size: 11.5px; color: var(--chu-mo); }
#dia-vang .phu.tu-do { color: #9fd8a0; }

/* Tiếng sóng plasma — khối riêng, không thuộc danh sách nhạc trên đĩa */
.muc-plasma {
  padding: 11px 13px; margin-bottom: 12px; border-radius: 9px;
  background: rgba(120, 180, 255, .06);
  border: 1px solid rgba(120, 180, 255, .26);
}
.muc-plasma .canh-bao.nho { margin: 7px 0; }

/* Danh sách 27 bản nhạc */
.ds-nhac { margin: 10px 0 0; padding-left: 2.2em; }
.ds-nhac li { margin-bottom: 9px; font-size: 12.5px; }
.ds-nhac .nuoc {
  display: inline-block; margin-right: 7px; padding: 0 6px;
  border-radius: 9px; font-size: 10.5px; color: var(--chu-mo);
  background: rgba(255, 255, 255, .07);
}
.ds-nhac .ten { display: inline; }
.ds-nhac .phu { display: block; }

/* Nút phát của từng bản */
.hang-phat { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.nut-phat-nhac {
  width: 26px; height: 26px; padding: 0; line-height: 1; flex: none;
  border-radius: 50%;
}
.nut-phat-nhac.dang-phat { background: rgba(232, 200, 119, .25); color: #ffe9b8; }
.trang-thai { font-size: 11px; color: var(--chu-mo); }

/* ---------- Dòng báo đang phát nhạc gì ---------- */
#bao-nhac {
  position: fixed; z-index: 11; left: 12px;
  bottom: calc(var(--cao-dieu-khien, 150px) + 22px);
  max-width: min(26em, calc(100vw - 24px));
  padding: 4px 11px; border-radius: 13px;
  font-size: 11.5px; color: var(--chu-mo); pointer-events: none;
  background: rgba(6, 10, 20, 0.66); border: 1px solid var(--vien);
  backdrop-filter: blur(5px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Dòng thông tin khi ngắm cận cảnh ---------- */
#thong-tin-can-canh {
  position: fixed; z-index: 11; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--cao-dieu-khien, 150px) + 22px);
  max-width: min(32em, calc(100vw - 24px));
  padding: 4px 13px; border-radius: 13px;
  font-size: 12px; color: #ffe0a8; pointer-events: none; text-align: center;
  background: rgba(6, 10, 20, 0.7); border: 1px solid rgba(232, 163, 61, .4);
  backdrop-filter: blur(5px);
}

/* ---------- Chú thích mốc sự kiện ---------- */
#moc-su-kien {
  position: fixed; z-index: 12; left: 50%; transform: translateX(-50%);
  top: 16px; text-align: center; pointer-events: none;
  padding: 7px 18px; border-radius: 20px;
  background: rgba(6, 10, 20, 0.72); border: 1px solid rgba(232, 163, 61, .5);
  backdrop-filter: blur(6px);
}
#moc-su-kien b { display: block; font-size: 14px; color: #ffd08a; }
#moc-su-kien span { font-size: 11.5px; color: var(--chu-mo); }

/* ---------- Lớp báo đang nạp ---------- */
#dang-nap {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; padding: 24px;
  background: #000; color: var(--chu-mo); transition: opacity .5s;
}
#dang-nap.an { opacity: 0; pointer-events: none; }
#dang-nap.loi {
  color: #ffd2d2; max-width: 36em; margin: 0 auto;
  line-height: 1.6; text-align: left; align-items: flex-start;
}
#dang-nap .chi-tiet { font-size: 11.5px; color: var(--chu-mo); }
#dang-nap code {
  background: rgba(255, 255, 255, .08); padding: 1px 5px; border-radius: 3px;
}

/* ---------- Tự ẩn giao diện ---------- */
/* Ngồi yên 15 giây là ba khung giao diện mờ dần rồi biến mất, nhường cả màn
   hình cho bầu trời — nhất là trên điện thoại, nơi chúng chiếm quá nửa màn.
   Chạm vào màn hình là hiện lại. Mờ dần chứ không tắt phụt, để người xem kịp
   hiểu chuyện gì đang xảy ra. */
#tieu-de, #bang-thong-so, #dieu-khien {
  transition: opacity .45s ease, transform .45s ease;
}
body.an-giao-dien #tieu-de,
body.an-giao-dien #bang-thong-so,
body.an-giao-dien #dieu-khien {
  opacity: 0; pointer-events: none;
}
body.an-giao-dien #tieu-de { transform: translateX(-14px); }
body.an-giao-dien #bang-thong-so { transform: translateX(14px); }
body.an-giao-dien #dieu-khien { transform: translateY(14px); }

/* Giao diện ẩn rồi thì mấy dòng chú thích mỏng tụt xuống sát đáy, khỏi lơ
   lửng giữa khoảng trống mà hàng điều khiển vừa để lại. */
body.an-giao-dien #bao-nhac,
body.an-giao-dien #thong-tin-can-canh { bottom: 16px; }

/* Nút gọi giao diện trở lại — chỉ hiện khi đang ẩn */
#nut-hien-giao-dien {
  position: fixed; z-index: 15; top: 12px; right: 12px;
  width: 42px; height: 42px; padding: 0; font-size: 17px; line-height: 1;
  border-radius: 50%;
  background: rgba(6, 10, 20, 0.72); border: 1px solid var(--vien);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
body.an-giao-dien #nut-hien-giao-dien { opacity: 1; pointer-events: auto; }

/* ---------- Khung chung cho các bảng nổi ---------- */
#tieu-de, #bang-thong-so, #dieu-khien {
  position: fixed; z-index: 10;
  background: var(--nen-bang);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: blur(6px);
}

/* ---------- Tiêu đề (trên trái) ---------- */
#tieu-de { top: 12px; left: 12px; max-width: 24em; }
#tieu-de h1 {
  margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: .2px;
}
.canh-bao {
  margin: 0 0 8px; font-size: 12.5px; color: #ffe0a8;
  border-left: 3px solid #e8a33d; padding-left: 8px;
}
/* Ghi chú nhỏ trong khung tiêu đề (nguồn vị trí hành tinh, cách chiếu sáng) */
.ghi-chu-nho {
  margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--chu-mo);
}

.xuat-phat { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font-size: 12.5px; }
.xuat-phat dt { color: var(--nhan); }
.xuat-phat dd { margin: 0; }

/* Khối đổi vị trí xuất phát */
#nut-doi-vi-tri { margin-top: 8px; font-size: 11.5px; padding: 3px 8px; }
#doi-vi-tri {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--vien);
  display: flex; flex-direction: column; gap: 7px; font-size: 12px;
}
#doi-vi-tri label { color: var(--nhan); display: flex; align-items: center; gap: 6px; }
#doi-vi-tri .hai-o { display: flex; gap: 10px; }
#doi-vi-tri input {
  font: inherit; font-size: 12px; width: 6.5em; color: var(--chu);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--vien); border-radius: 5px; padding: 3px 6px;
}
#doi-vi-tri .ghi-chu-nho { margin: 0; }

/* Chữ cảnh báo trong bảng thông số (ví dụ "đoạn mở đầu giả định") */
#bang-thong-so dd.canh-bao-chu { color: #ffd08a; }

/* ---------- Bảng thông số (trên phải) ---------- */
#bang-thong-so {
  top: 12px; right: 12px; width: 23.5em;
  /* Cửa sổ thấp thì bảng tự cuộn, không đè lên hàng điều khiển ở dưới. */
  max-height: calc(100vh - 160px); overflow-y: auto;
}
#bang-thong-so h2 {
  margin: 0 0 8px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .8px; color: var(--nhan-manh);
}
#bang-thong-so dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 13px;
}
#bang-thong-so dt { color: var(--nhan); white-space: nowrap; }
#bang-thong-so dd {
  margin: 0; text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: "Consolas", "Cascadia Mono", monospace; font-size: 12.5px;
}
#bang-thong-so dd.mo { color: var(--chu-mo); }
.canh-bao.nho {
  margin: 10px 0 0; font-size: 11.5px; color: #cfe6ff;
  border-left-color: #5b9bd5;
}
.ghi-chu {
  margin: 10px 0 0; padding-top: 8px; font-size: 11.5px; line-height: 1.5;
  color: var(--chu-mo); border-top: 1px solid var(--vien);
}
kbd {
  font: inherit; font-size: 11px; border: 1px solid var(--vien);
  border-radius: 3px; padding: 0 4px; background: rgba(255, 255, 255, .06);
}
#nut-an-bang {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0; line-height: 1;
}
/* Nút gập/mở các dòng số liệu phụ — chỉ dùng trên màn hình nhỏ, nơi không đủ
   chỗ hiện cả 14 dòng. Trên máy tính màn hình rộng thì hiện hết, khỏi cần nút. */
#nut-them-so-lieu { display: none; margin-top: 9px; font-size: 11.5px; padding: 3px 9px; }
body.an-bang #bang-thong-so dl,
body.an-bang #bang-thong-so h2,
body.an-bang #bang-thong-so .canh-bao.nho,
body.an-bang #bang-thong-so #ghi-chu-san,
body.an-bang #bang-thong-so .ghi-chu { display: none; }
body.an-bang #bang-thong-so { width: auto; }

/* ---------- Điều khiển (dưới) ---------- */
#dieu-khien {
  left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.hang-thanh { display: flex; align-items: center; gap: 10px; }

/* Thanh thời gian cùng dải vạch đánh dấu mốc sự kiện nằm chồng lên nhau */
.boc-thanh { position: relative; flex: 1; display: flex; align-items: center; }
#vach-moc {
  position: absolute; left: 0; right: 0; top: 50%; height: 15px;
  margin-top: -7px; pointer-events: none;
}
#vach-moc i {
  position: absolute; top: 0; width: 2px; height: 15px; margin-left: -1px;
  background: #ffc46b; opacity: .8; border-radius: 1px;
  pointer-events: auto;   /* để rê chuột lên xem được tên mốc */
}
.hang-nut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.hang-nut label { color: var(--nhan); display: inline-flex; align-items: center; gap: 6px; }

button, select {
  font: inherit; font-size: 12.5px; color: var(--chu);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--vien); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
}
/* Thẻ select tự nới rộng bằng dòng chữ DÀI NHẤT trong danh sách, mà ở đây có
   những dòng rất dài ("Voyager, ống kính góc hẹp — 0,424°"). Không chặn lại
   thì trên điện thoại hàng điều khiển bị đẩy xuống thành bảy tám dòng, chiếm
   nửa màn hình. Chặn bề ngang rồi cắt bớt bằng dấu ba chấm; bấm vào vẫn xổ ra
   đầy đủ chữ. */
select {
  max-width: 13em; text-overflow: ellipsis;
}

/* Từng dòng trong danh sách xổ xuống. Nền của thẻ <select> là màu trong suốt,
   nhưng danh sách xổ ra lại nằm ngoài trang nên không thừa hưởng được —
   phải đặt màu đặc cho riêng nó. */
select option {
  background: var(--nen-chon); color: var(--chu);
}
button:hover, select:hover { background: rgba(255, 255, 255, .14); }
button:disabled, select:disabled { opacity: .5; cursor: default; }
#nut-phat { min-width: 6.5em; }
#nut-bai-ke { padding: 4px 9px; }
#nut-nhac.dang-bat { background: rgba(232, 200, 119, .22); color: #ffe9b8; }

#thanh-thoi-gian {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent; cursor: pointer;
}
#thanh-thoi-gian::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #2b6fb8, #7fc3ff);
}
#thanh-thoi-gian::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #eaf4ff; border: 1px solid #5b87bd;
}
#thanh-thoi-gian::-moz-range-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #2b6fb8, #7fc3ff);
}
#thanh-thoi-gian::-moz-range-thumb {
  width: 15px; height: 15px; border: 1px solid #5b87bd;
  border-radius: 50%; background: #eaf4ff;
}

#ghi-nguon { margin: 0; font-size: 11px; color: var(--chu-mo); }

/* ---------- Cửa sổ thấp (ví dụ chia đôi màn hình) ---------- */
@media (max-height: 620px) {
  #bang-thong-so .ghi-chu, .xuat-phat, .ghi-chu-nho { display: none; }
  #ghi-nguon { font-size: 10px; }
}

/* ---------- Điện thoại / màn hình nhỏ ---------- */
@media (max-width: 760px) {
  #tieu-de { max-width: none; right: 12px; padding: 9px 11px; }
  #tieu-de h1 { font-size: 14px; }
  .xuat-phat, .ghi-chu-nho { display: none; }
  #bang-thong-so {
    top: auto; right: 12px; left: 12px; width: auto;
    /* --cao-dieu-khien do JavaScript đo rồi đặt vào (xem main.js) */
    bottom: calc(var(--cao-dieu-khien, 150px) + 20px);
    max-height: calc(100vh - var(--cao-dieu-khien, 150px) - 190px);
  }
  #bang-thong-so .ghi-chu { display: none; }
  #bang-thong-so dl { font-size: 12px; }
  .hang-nut { gap: 6px 9px; font-size: 11.5px; }
  .hang-nut label { gap: 4px; }
  select { max-width: 8.5em; }
  button, select { padding: 4px 7px; }
  #dieu-khien { padding: 8px 10px; gap: 6px; }
  #ghi-nguon { font-size: 10px; line-height: 1.35; }
  /* Chú thích mốc sự kiện phải tránh khung tiêu đề ở trên cùng */
  #moc-su-kien { top: auto; bottom: calc(var(--cao-dieu-khien, 150px) + 28px); }
  #dia-vang, #ve-trang { max-height: 86vh; padding: 14px 15px; }
  #dia-vang .gioi-thieu, #ve-trang p, .ds-nhac li, .ds-that-gia { font-size: 12px; }
  .ds-nhac { padding-left: 1.8em; }

  /* Bảng thông số: chỉ 7 dòng chính, 7 dòng phụ gấp lại. Màn hình điện thoại
     cao 812 điểm ảnh mà ba khung giao diện chiếm hết thì chẳng còn chỗ ngắm
     trời — mà ngắm trời mới là việc chính của trang này. */
  #nut-them-so-lieu { display: inline-block; }
  body:not(.hien-them) #bang-thong-so .ts-phu { display: none; }
  body.an-bang #nut-them-so-lieu { display: none; }

  /* Dòng ghi nguồn bắt buộc phải có (mục 8), nhưng thu nhỏ lại cho đỡ chiếm chỗ */
  #ghi-nguon { font-size: 9px; line-height: 1.32; }
}