/* explorer.css - CSS rieng cua explorer.html (dung chung: css/common.css) */
/* ============================================================
   DESIGN TOKENS  —  "Modern Science Museum for Kids"
   Deep-blue space, warm sunlight, vibrant planets, Apple-like glass.
   ============================================================ */
:root{--space-top:#0a1030;--space-mid:#111a44;--space-low:#1b2a63;--glass:rgba(20,30,66,0.55);--glass-strong:rgba(16,24,56,0.72);--glass-brd:rgba(150,180,255,0.18);--glass-brd-strong:rgba(160,190,255,0.35);--sun:#ffcf6b;--sun-warm:#ff9d3d;--accent:#5fd3ff;--accent-2:#8f7bff;--good:#63e6a8;--radius-xl:26px;--radius-lg:18px;--radius-md:13px;--radius-sm:9px;--shadow-soft:0 18px 50px -18px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.3);--blur:22px;--panel-w:340px;--info-w:400px;--font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;}

/* Light "day at the museum" theme (dark-mode-ready toggle) */
body.theme-light{
  --glass:rgba(238,244,255,0.72);
  --glass-strong:rgba(246,249,255,0.85);
  --glass-brd:rgba(60,90,170,0.2);
  --glass-brd-strong:rgba(60,90,170,0.4);
  --ink:#122148;
  --ink-soft:#3a4c86;
  --ink-faint:#6072a8;
  --shadow-soft:0 18px 50px -20px rgba(40,60,120,0.4), 0 2px 8px rgba(40,60,120,0.15);
}
html,body{height:100%;}
body{background:#06091c;overflow:hidden;text-rendering:optimizeLegibility;}
button{color:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* ---- 3D layers ---- */
#scene{position:fixed;inset:0;z-index:0;}
#labels{position:fixed;inset:0;z-index:1;pointer-events:none;}

/* Nhãn tên thiên thể do `CSS2DRenderer` đặt theo vị trí hành tinh mỗi khung hình.
   ⚠️ Trước 01/08/2026 cả khối này nằm INLINE trong `_makeLabel()`. Chuyển ra đây vì
   style inline thắng mọi class — còn để inline thì cổng lộ trình không tô được nhãn
   mà phải dùng `!important`. */
.body-lbl{pointer-events:auto;cursor:pointer;
  font:600 11px/1 var(--font-display,sans-serif);letter-spacing:.06em;color:#eaf1ff;
  background:rgba(16,24,56,.55);border:1px solid rgba(150,180,255,.25);
  padding:3px 9px;border-radius:20px;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .15s,transform .15s,opacity .3s;}
.body-lbl:hover{background:rgba(95,211,255,.3);transform:scale(1.06);}

/* ---- Cổng lộ trình: chỉ ra chỗ bắt đầu, làm mờ chỗ chưa mở (js/route-gate.js) ----
   ⚠️ KHÔNG dùng `filter:grayscale()` để làm mờ — bài học đã ghi 3 lần: trên nền
   gradient sáng nó cho ra khối xám SÁNG HƠN bình thường, tức hút mắt vào đúng cái
   không dùng được. Ở đây làm mờ bằng `opacity` + hạ tương phản viền. */
.body-lbl.gate-locked{opacity:.34;cursor:not-allowed;
  border-color:rgba(150,180,255,.12);color:#9fb0d0;}
.body-lbl.gate-locked:hover{background:rgba(16,24,56,.55);transform:none;}

.body-lbl.gate-start{color:#04060f;font-weight:700;
  background:linear-gradient(120deg,var(--accent,#5fd3ff),var(--accent-2,#8f7bff));
  border-color:rgba(95,211,255,.9);
  box-shadow:0 0 20px rgba(56,189,248,.8);
  animation:gateStartPulse 1.9s ease-in-out infinite;}
.body-lbl.gate-start:hover{transform:scale(1.08);}
/* Nhãn "BẮT ĐẦU TỪ ĐÂY" treo bên dưới tên hành tinh. */
.body-lbl .gate-hint{display:block;margin-top:4px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#04060f;opacity:.82;}
/* ⚠️ Vòng sáng để ở rule GỐC, không chỉ trong keyframes: `prefers-reduced-motion`
   tắt animation (common.css làm toàn cục), mà tắt rồi thì phải CÒN thứ chỉ đường. */
@keyframes gateStartPulse{
  0%,100%{box-shadow:0 0 20px rgba(56,189,248,.8);}
  50%    {box-shadow:0 0 30px rgba(56,189,248,.95);}
}

/* ---- Loading intro ---- */
#loader{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:22px;
  background:radial-gradient(ellipse at 50% 40%, #1b2a63 0%, #0a1030 55%, #06091c 100%);
  transition:opacity .8s var(--ease), visibility .8s;
}
/* ⚠️ `pointer-events:none` là BẮT BUỘC, không phải trang trí. `#loader` có
   `transition:opacity .8s, visibility .8s`, nên trong suốt 0,8s cuối nó đã mờ tới
   `opacity:0,02` mà `visibility` vẫn còn là `visible` — tức là trang trông đã sẵn
   sàng nhưng MỌI CÚ BẤM BỊ LỚP PHỦ NUỐT. Đo được bằng `elementFromPoint` ở giữa
   nút EN: mốc 1600ms trả về `div#loader.hidden`, tới 3000ms mới trả về đúng cái
   nút. Lỗi này có từ trước và im lặng — bấm không ăn thì người dùng chỉ tưởng
   mình bấm trượt. */
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader-orb{
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff6d8, var(--sun) 40%, var(--sun-warm) 75%);
  box-shadow:0 0 60px 12px rgba(255,180,90,.55), 0 0 120px 30px rgba(255,140,60,.25);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.loader-title{font-family:var(--font-display);font-weight:600;letter-spacing:.02em;color:var(--ink);font-size:20px;}
.loader-sub{color:var(--ink-soft);font-size:13px;letter-spacing:.14em;text-transform:uppercase;}

/* ============================================================
   LEFT CONTROL DECK
   ============================================================ */
.panel{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:var(--shadow-soft);
}
#deck{
  position:fixed;z-index:10;top:18px;left:18px;bottom:18px;width:var(--panel-w);
  border-radius:var(--radius-xl);
  display:flex;flex-direction:column;overflow:hidden;
  animation:deckIn .7s var(--ease) backwards;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
/* Collapsed state (desktop): slide the deck off-screen to the left */
#deck.collapsed{transform:translateX(calc(-100% - 26px));opacity:0;pointer-events:none;}
/* Collapse button in the deck header */
.deck-collapse{
  flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);color:var(--ink-soft);
  transition:background .16s,color .16s,transform .1s;
}
body.theme-light .deck-collapse{background:rgba(255,255,255,.5);}
.deck-collapse:hover{background:rgba(255,255,255,.12);color:var(--ink);}
.deck-collapse:active{transform:scale(.92);}
.deck-collapse svg{width:17px;height:17px;}
/* Floating button to reopen the collapsed deck */
/* ---- Dải nhắc mạng kém / đường lùi khi cảnh 3D không dựng được / khuyến nghị màn rộng ----
   (`docs/decisions/005` mục 6). Neo ĐÁY-GIỮA chứ không góc trên: góc trên-trái đã có
   nút menu + nút mở bảng, góc trên-phải là bảng thông tin rộng 400px.
   ⚠️ `bottom` phải cao hơn box thoại Comet của lượt onboarding (`.mo-say`) — nhưng
      BA kind này KHÔNG BAO GIỜ cùng hiện với box thoại đó: "mạng kém" chỉ hiện lúc
      vào trang (trước khi Comet nói), "không dựng được cảnh" thì Comet chưa từng
      chạy, còn `wide` (thêm 29/08/2026) thì CỐ Ý không hiện khi `?onboard=1`. */
#perf-note{position:fixed;z-index:24;left:50%;transform:translateX(-50%);
  bottom:clamp(14px,4vh,32px);max-width:min(560px,calc(100vw - 24px));
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;}
#perf-note[hidden]{display:none;}
#perf-note .txt{font-size:13px;line-height:1.5;}
#perf-note .go{flex:none;min-height:44px;padding:0 14px;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;color:#04121e;border:none;
  background:linear-gradient(135deg,#5fd3ff,#8f7bff);}
/* ⚠️ Khai lại `[hidden]` cho CẢ HAI nút. Kind `wide` ẩn nút hành động, mà dự án đã
   trả giá ~12 lần cho đúng cái bẫy này: `display` của tác giả THẮNG `display:none`
   mà trình duyệt áp cho `[hidden]`. Ở đây `.go` chưa khai `display` nên nó đang
   đúng nhờ may — khai tường minh để lần ai đó thêm `display:flex` vào không làm
   nút hiện ra ở một kind không có gì để bấm. */
#perf-note .go[hidden]{display:none;}
#perf-note .x{flex:none;min-width:44px;min-height:44px;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:14px;color:inherit;border:1px solid rgba(255,255,255,.18);
  background:transparent;}
#perf-note .x[hidden]{display:none;}
@media (max-width:620px){
  #perf-note{flex-wrap:wrap;justify-content:flex-end;}
  #perf-note .txt{flex:1 1 100%;}
  /* ⚠️ ĐÃ THỬ RỒI BỎ (29/08/2026) — ĐỪNG THỬ LẠI: cho kind `wide` (chỉ có nút ✕)
     đứng CÙNG HÀNG với chữ bằng `flex-wrap:nowrap`. Tôi ước lượng tiết kiệm ~56px;
     ĐO THẬT trên 390×844 thì **xuống hàng 180px · cùng hàng 182px**, tức KHÔNG tiết
     kiệm gì mà còn nhỉnh hơn 2px — vì chữ phải chia chỗ với nút 44px nên xuống thêm
     một dòng, bù đúng phần vừa bớt. Thứ quyết định chiều cao ở đây là ĐỘ DÀI CÂU,
     không phải cách xếp nút. Muốn dải thấp hơn thì rút chữ. */
}

#deck-reopen{position:fixed;z-index:13;top:16px;left:16px;width:46px;height:46px;border-radius:14px;display:none;place-items:center;}
#deck-reopen svg{width:20px;height:20px;}
#deck-reopen.show{display:grid;}
@keyframes deckIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.deck-head{padding:22px 22px 14px;}
/* Logo dùng chung ở `css/common.css`. Ô vuông gradient `.brand-mark` đã bỏ.
   ⚠️ Ở đây logo nằm HÀNG RIÊNG phía trên tiêu đề, khác 4 trang còn lại (nó đứng
      cạnh chữ). Lý do đo được: bảng chỉ rộng 296px sau padding, wordmark cao
      38px thì rộng 131px, cộng nút gập 44px (cảm ứng) là tiêu đề chỉ còn 121px
      trong khi riêng chữ "Solar System" ở cỡ 20px đã cần ~125px. */
/* Hàng trên của bảng: logo bên trái, nút VI/EN bên phải — giống 15 trang còn
   lại. Đặt trong `.deck-head` (ngoài `.deck-scroll`) nên không cuộn mất; KHÔNG
   dựng khối `position:fixed` mới vì góc trên-phải đã bị `#info` (rộng 400px)
   chiếm, hai thứ sẽ đè nhau khi mở bảng thông tin. */
.deck-topline{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:14px;}
.deck-topline .brand-logo{--logo-h:34px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-text{flex:1;}
h1{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.05;margin:0;letter-spacing:.005em;}
.brand-sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}
.lede{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:14px 0 0;}

.deck-scroll{flex:1;overflow-y:auto;padding:6px 16px 16px;scrollbar-width:thin;scrollbar-color:var(--glass-brd-strong) transparent;}
.deck-scroll::-webkit-scrollbar{width:8px;}
.deck-scroll::-webkit-scrollbar-thumb{background:var(--glass-brd-strong);border-radius:8px;}

.search{position:relative;margin:8px 6px 6px;}
.search input{
  width:100%;border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);
  color:var(--ink);border-radius:var(--radius-md);padding:11px 12px 11px 38px;font-size:13.5px;
  transition:border-color .2s, background .2s;
}
body.theme-light .search input{background:rgba(255,255,255,.5);}
.search input::placeholder{color:var(--ink-faint);}
.search input:focus{outline:none;border-color:var(--accent);background:rgba(95,211,255,.08);}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-faint);}

.section-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:16px 8px 8px;font-weight:600;}

/* Planet list */
.planet-list{display:flex;flex-direction:column;gap:5px;}
.planet-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid transparent;background:transparent;border-radius:var(--radius-md);
  padding:9px 10px;transition:background .2s var(--ease), border-color .2s, transform .12s;
}
.planet-item:hover{background:rgba(255,255,255,.07);border-color:var(--glass-brd);}
body.theme-light .planet-item:hover{background:rgba(60,90,170,.08);}
.planet-item.active{background:rgba(95,211,255,.14);border-color:rgba(95,211,255,.4);}
.planet-item:active{transform:scale(.985);}
.dot{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset -3px -3px 6px rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.25);}
.planet-item .meta{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.planet-item .nm{font-family:var(--font-display);font-weight:600;font-size:14px;}
.planet-item .ds{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-empty{color:var(--ink-faint);font-size:12.5px;padding:10px;text-align:center;}

/* Controls */
.ctl{margin:6px 6px 0;}
.ctl-row{display:flex;gap:8px;}
.ctl-row--gap{margin-top:8px;}
.btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);
  border-radius:var(--radius-md);padding:11px 10px;font-size:12.5px;font-weight:500;
  transition:background .18s, border-color .18s, transform .1s;
}
body.theme-light .btn{background:rgba(255,255,255,.5);}
.btn:hover{background:rgba(255,255,255,.12);border-color:var(--glass-brd-strong);}
body.theme-light .btn:hover{background:rgba(60,90,170,.1);}
.btn:active{transform:scale(.97);}
.btn.primary{background:linear-gradient(135deg, rgba(95,211,255,.9), rgba(143,123,255,.9));border-color:transparent;color:#06122b;font-weight:600;}
.btn.primary:hover{filter:brightness(1.08);}
.btn svg{width:15px;height:15px;}

.slider-wrap{margin:14px 8px 4px;}
.slider-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;}
.slider-top .k{font-size:12.5px;font-weight:500;}
.slider-top .v{font-size:12px;color:var(--accent);font-family:var(--font-display);font-weight:600;}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer;border:2px solid var(--accent);
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:pointer;}

/* Toggle switches */
.toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 8px;border-radius:var(--radius-md);transition:background .15s;}
.toggle:hover{background:rgba(255,255,255,.05);}
.toggle .k{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;}
.toggle .k svg{width:15px;height:15px;color:var(--ink-soft);}
.switch{position:relative;width:42px;height:24px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.track{position:absolute;inset:0;border-radius:24px;background:rgba(255,255,255,.14);border:1px solid var(--glass-brd);transition:background .2s;}
body.theme-light .track{background:rgba(60,90,170,.18);}
.track::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .22s var(--ease);}
.switch input:checked + .track{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:transparent;}
.switch input:checked + .track::before{transform:translateX(18px);}

.deck-foot{padding:12px 16px 16px;border-top:1px solid var(--glass-brd);display:flex;gap:8px;align-items:center;}
.hint{font-size:10.5px;color:var(--ink-faint);line-height:1.4;flex:1;}
.home-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);color:var(--ink);
  border-radius:var(--radius-md);padding:9px 13px;font-size:12.5px;font-weight:600;font-family:var(--font-display);
  transition:background .16s,border-color .16s,transform .1s;
}
body.theme-light .home-btn{background:rgba(255,255,255,.5);}
.home-btn:hover{background:rgba(255,255,255,.12);border-color:var(--glass-brd-strong);}
.home-btn:active{transform:scale(.96);}
.home-btn svg{width:15px;height:15px;}

/* ============================================================
   INFO PANEL (right, slides in on planet select)
   ============================================================ */
#info{
  position:fixed;z-index:10;top:18px;right:18px;bottom:18px;width:var(--info-w);
  border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
}
#info.open{transform:none;opacity:1;pointer-events:auto;}
.info-hero{position:relative;padding:22px 22px 18px;overflow:hidden;flex:none;}
.info-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--glass) 92%);pointer-events:none;}
#info-preview{position:relative;z-index:1;width:100%;height:168px;border-radius:var(--radius-lg);overflow:hidden;background:#0a1030;box-shadow:inset 0 0 30px rgba(0,0,0,.5);}
#info-preview canvas{width:100%;height:100%;display:block;}
.info-close{position:absolute;z-index:3;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--glass-brd);}
.info-close svg{width:16px;height:16px;}
.info-titles{position:relative;z-index:2;margin-top:14px;}
.info-titles h2{font-family:var(--font-display);font-weight:700;font-size:26px;margin:0;}
.info-titles .sub{color:var(--accent);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px;font-weight:600;}

.info-scroll{flex:1;overflow-y:auto;padding:4px 20px 22px;scrollbar-width:thin;scrollbar-color:var(--glass-brd-strong) transparent;}
.info-scroll::-webkit-scrollbar{width:8px;}
.info-scroll::-webkit-scrollbar-thumb{background:var(--glass-brd-strong);border-radius:8px;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 6px;}
.stat{background:rgba(255,255,255,.055);border:1px solid var(--glass-brd);border-radius:var(--radius-md);padding:11px 12px;}
body.theme-light .stat{background:rgba(255,255,255,.55);}
.stat .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.stat .v{font-family:var(--font-display);font-weight:600;font-size:15px;margin-top:3px;}
.stat .v.sm{font-size:13.5px;}
.stat.wide{grid-column:1/-1;}

.block-title{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.03em;margin:22px 0 10px;display:flex;align-items:center;gap:8px;color:var(--ink);}
.block-title::before{content:"";width:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.prose{font-size:13px;line-height:1.6;color:var(--ink-soft);}
.facts{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px;}
.facts li{font-size:12.5px;line-height:1.5;color:var(--ink-soft);padding-left:22px;position:relative;}
.facts li::before{content:"✦";position:absolute;left:0;top:0;color:var(--sun);}

/* Life badge */
.life{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid var(--glass-brd);border-radius:var(--radius-lg);padding:14px;margin-top:8px;}
body.theme-light .life{background:rgba(255,255,255,.55);}
.life .ring{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:20px;}
.life .ring--hab{background:rgba(95,211,255,.16);}
.life .txt .h{font-family:var(--font-display);font-weight:600;font-size:13.5px;}
.life .txt .p{font-size:12px;color:var(--ink-soft);line-height:1.5;margin-top:3px;}

/* Ecosystem cards */
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px;}
.eco{background:rgba(255,255,255,.05);border:1px solid var(--glass-brd);border-radius:var(--radius-md);padding:12px;transition:transform .15s var(--ease), border-color .15s;}
body.theme-light .eco{background:rgba(255,255,255,.55);}
.eco:hover{transform:translateY(-2px);border-color:var(--glass-brd-strong);}
.eco .icon{font-size:17px;}
.eco .h{font-family:var(--font-display);font-weight:600;font-size:12px;margin:6px 0 4px;}
.eco .p{font-size:11.5px;line-height:1.45;color:var(--ink-soft);}
.eco.wide{grid-column:1/-1;}

.pill-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.pill{font-size:11.5px;padding:6px 11px;border-radius:20px;background:rgba(95,211,255,.12);border:1px solid rgba(95,211,255,.28);color:var(--ink);}

/* ============================================================
   BOTTOM FLIGHT NAV (planet view)
   ============================================================ */
#nav{
  position:fixed;z-index:12;left:50%;bottom:20px;transform:translate(-50%,120%);
  display:flex;gap:8px;padding:8px;border-radius:var(--radius-xl);
  transition:transform .5s var(--ease);
}
#nav.show{transform:translate(-50%,0);}
.nav-btn{
  display:flex;align-items:center;gap:7px;border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.06);border-radius:var(--radius-md);padding:10px 15px;font-size:12.5px;font-weight:500;white-space:nowrap;
  transition:background .18s, transform .1s;
}
body.theme-light .nav-btn{background:rgba(255,255,255,.5);}
.nav-btn:hover{background:rgba(255,255,255,.13);}
.nav-btn:active{transform:scale(.96);}
.nav-btn.sun{background:linear-gradient(135deg,var(--sun),var(--sun-warm));color:#3a1e00;border-color:transparent;font-weight:600;}
.nav-btn svg{width:15px;height:15px;}

/* mobile menu button */
#menu-btn{position:fixed;z-index:13;top:16px;left:16px;width:46px;height:46px;border-radius:14px;display:none;place-items:center;}
#menu-btn svg{width:20px;height:20px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  :root{--panel-w:300px;--info-w:340px;}
}
@media (max-width:720px){
  #menu-btn{display:grid;}
  #deck{top:0;left:0;bottom:0;width:min(86vw,340px);border-radius:0 var(--radius-xl) var(--radius-xl) 0;transform:translateX(-105%);transition:transform .45s var(--ease);}
  #deck.open{transform:none;}
  #info{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:74vh;border-radius:var(--radius-xl);transform:translateY(calc(100% + 20px));}
  #info.open{transform:none;}
  .eco-grid{grid-template-columns:1fr;}
  #nav{bottom:calc(74vh + 16px);flex-wrap:wrap;justify-content:center;max-width:94vw;}
  #nav .lbl{display:none;}
  .nav-btn{padding:11px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.12s !important;}
}

/* ============================================================
   REGION / UNIVERSE NAVIGATION WIDGET  (additive, namespaced .nm-)
   Reuses the existing .panel glass + design tokens for a seamless match.
   ============================================================ */
.nm-widget{
  position:fixed;top:18px;left:calc(var(--panel-w) + 34px);width:226px;z-index:14;
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  max-height:calc(100vh - 36px);animation:nmIn .6s var(--ease) both;
}
@keyframes nmIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.nm-tabs{display:flex;gap:5px;padding:7px;border-bottom:1px solid var(--glass-brd);}
.nm-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;
  border:1px solid transparent;background:rgba(255,255,255,.05);border-radius:var(--radius-sm);
  padding:8px 5px;font-size:11px;font-weight:600;color:var(--ink-soft);
  transition:background .18s var(--ease),color .18s,transform .1s;
}
body.theme-light .nm-tab{background:rgba(255,255,255,.45);}
.nm-tab:hover{background:rgba(255,255,255,.12);color:var(--ink);transform:translateY(-1px);}
.nm-tab:active{transform:scale(.96);}
.nm-tab.active{background:linear-gradient(135deg,rgba(95,211,255,.92),rgba(143,123,255,.92));color:#06122b;border-color:transparent;}
.nm-body{padding:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--glass-brd-strong) transparent;}
.nm-body::-webkit-scrollbar{width:7px;}
.nm-body::-webkit-scrollbar-thumb{background:var(--glass-brd-strong);border-radius:7px;}
.nm-hidden{display:none;}
.nm-cap{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:2px 4px 8px;}
.nm-region-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink);
  background:rgba(95,211,255,.12);border:1px solid rgba(95,211,255,.28);padding:5px 11px;border-radius:20px;margin:0 0 11px 2px;}
.nm-list{display:flex;flex-direction:column;gap:3px;}
.nm-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  padding:6px 8px;font-size:12.5px;font-weight:500;color:var(--ink);
  transition:background .16s var(--ease),border-color .16s,transform .1s;
}
.nm-item:hover{background:rgba(255,255,255,.08);border-color:var(--glass-brd);transform:translateX(2px);}
body.theme-light .nm-item:hover{background:rgba(60,90,170,.08);}
.nm-item:active{transform:scale(.98);}
.nm-item.active{background:rgba(95,211,255,.16);border-color:rgba(95,211,255,.42);}
.nm-dot{width:15px;height:15px;border-radius:50%;flex:none;box-shadow:inset -2px -2px 4px rgba(0,0,0,.4);}
.nm-reg{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  padding:8px;font-size:12.5px;font-weight:500;
  transition:background .16s var(--ease),border-color .16s,transform .1s;
}
.nm-reg .ic{font-size:13px;width:18px;text-align:center;flex:none;}
.nm-reg .rn{flex:1;}
.nm-reg.unlocked{color:var(--ink);}
.nm-reg.unlocked:hover{background:rgba(99,230,168,.12);border-color:rgba(99,230,168,.3);transform:translateX(2px);}
.nm-reg.unlocked.current{background:rgba(99,230,168,.14);border-color:rgba(99,230,168,.34);}
.nm-reg.locked{color:var(--ink-faint);}
.nm-reg.locked:hover{background:rgba(255,255,255,.05);border-color:var(--glass-brd);transform:translateX(2px);}
.nm-toast{
  position:fixed;z-index:60;top:78px;left:calc(var(--panel-w) + 34px);
  background:var(--glass-strong);border:1px solid var(--glass-brd-strong);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);
  color:var(--ink);font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);display:flex;align-items:center;gap:8px;
}
.nm-toast.show{opacity:1;transform:none;}

/* Confirm-travel / locked-mission modal */
.nm-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,28,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),visibility .28s;}
.nm-modal.show{opacity:1;visibility:visible;pointer-events:auto;}
.nm-modal-card{max-width:392px;width:calc(100% - 48px);border-radius:var(--radius-xl);padding:30px 28px 24px;text-align:center;
  transform:translateY(10px) scale(.97);transition:transform .32s var(--ease);}
.nm-modal.show .nm-modal-card{transform:none;}
.nm-modal-ic{font-size:40px;line-height:1;}
.nm-modal-title{font-family:var(--font-display);font-weight:700;font-size:20px;margin:12px 0 0;color:var(--ink);}
.nm-modal-msg{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:12px 0 0;}
.nm-modal-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;}
.nm-modal-btn{border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);color:var(--ink);
  border-radius:var(--radius-md);padding:12px 22px;font-family:var(--font-display);font-weight:600;font-size:14px;
  transition:background .16s,border-color .16s,transform .1s;}
body.theme-light .nm-modal-btn{background:rgba(255,255,255,.5);}
.nm-modal-btn:hover{background:rgba(255,255,255,.12);border-color:var(--glass-brd-strong);}
.nm-modal-btn:active{transform:scale(.96);}
.nm-modal-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06122b;border-color:transparent;}
.nm-modal-btn.primary:hover{filter:brightness(1.08);}

/* Smooth cross-fade when switching Region/Universe tabs */
@keyframes nmFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nm-panel:not(.nm-hidden){animation:nmFade .34s var(--ease);}

/* Region Map preview items (non-live regions: shown but not interactive) */
.nm-item.preview{opacity:.6;}
.nm-item.preview:hover{transform:none;background:rgba(255,255,255,.04);}

/* ---- Universe Map tree ---- */
.nm-root{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);margin:2px 2px 2px;}
.nm-root .ic{font-size:14px;}
.nm-branch{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);margin:7px 2px 9px 8px;}
.nm-branch .ic{font-size:12px;}
.nm-regions{position:relative;margin-left:15px;padding-left:13px;border-left:1px solid var(--glass-brd);display:flex;flex-direction:column;gap:5px;}
.nm-node{position:relative;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);padding:7px 9px;color:var(--ink);transition:background .16s var(--ease),border-color .16s,transform .1s,box-shadow .3s;}
.nm-node::before{content:"";position:absolute;left:-13px;top:50%;width:11px;height:1px;background:var(--glass-brd);}
.nm-node .eyebrow{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
.nm-node .row{display:flex;align-items:center;gap:8px;margin-top:2px;}
.nm-node .ic{font-size:13px;width:17px;text-align:center;flex:none;}
.nm-node .t{font-family:var(--font-display);font-weight:600;font-size:12.5px;flex:1;line-height:1.15;}
.nm-node:hover{background:rgba(255,255,255,.07);border-color:var(--glass-brd);transform:translateX(2px);}
body.theme-light .nm-node:hover{background:rgba(60,90,170,.08);}
.nm-node.current{background:rgba(95,211,255,.14);border-color:rgba(95,211,255,.45);animation:nmGlow 2.6s ease-in-out infinite;}
@keyframes nmGlow{0%,100%{box-shadow:0 0 13px -3px rgba(95,211,255,.45)}50%{box-shadow:0 0 22px 0 rgba(95,211,255,.75)}}
.nm-node.completed .ic{color:var(--good);}
.nm-node.locked{color:var(--ink-soft);}
.nm-node.future{opacity:.5;font-style:italic;}
.nm-node.future:hover{opacity:.8;}

/* ---- Space-travel warp overlay ---- */
.nm-warp{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(ellipse at 50% 50%, #13224f 0%, #0a1030 55%, #06091c 100%);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s var(--ease),visibility .6s;}
.nm-warp.show{opacity:1;visibility:visible;pointer-events:auto;}
.nm-warp canvas{position:absolute;inset:0;width:100%;height:100%;}
.nm-warp .wt{position:relative;z-index:1;text-align:center;padding:0 24px;transform:translateY(12px) scale(.98);opacity:0;transition:opacity .6s var(--ease) .15s, transform .7s var(--ease) .15s;}
.nm-warp.show .wt{opacity:1;transform:none;}
.nm-warp .wt .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.nm-warp .wt .n{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,5vw,40px);color:var(--ink);margin-top:10px;text-shadow:0 2px 40px rgba(95,211,255,.55);}
.nm-warp .wt .sub{font-size:13px;color:var(--ink-soft);margin-top:10px;letter-spacing:.03em;}

/* ---- Region placeholder view ---- */
.nm-place{position:fixed;inset:0;z-index:13;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, rgba(12,22,60,.7), rgba(6,9,28,.9));
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s var(--ease),visibility .55s;}
.nm-place.show{opacity:1;visibility:visible;pointer-events:auto;}
.nm-place .card{max-width:460px;margin:0 24px;text-align:center;padding:36px 32px;border-radius:var(--radius-xl);animation:nmFade .6s var(--ease) .1s both;}
.nm-place .badge{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.nm-place h3{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,4vw,32px);margin:12px 0 0;color:var(--ink);}
.nm-place .status{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:600;padding:8px 16px;border-radius:22px;background:rgba(255,160,90,.14);border:1px solid rgba(255,160,90,.32);color:var(--ink);}
.nm-place p{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin:18px 0 0;}
.nm-place .locs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:20px;}
.nm-place .loc{font-size:11.5px;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);color:var(--ink-soft);}
.nm-place .return{margin-top:26px;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-md);padding:12px 22px;font-size:13px;font-weight:600;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06122b;transition:filter .15s,transform .1s;}
.nm-place .return:hover{filter:brightness(1.08);}
.nm-place .return:active{transform:scale(.97);}

/* ---- Language selector ---- */
.lang{display:flex;gap:2px;flex:none;background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);border-radius:20px;padding:2px;height:fit-content;}
body.theme-light .lang{background:rgba(255,255,255,.5);}
/* ⚠️ TRƯỚC 31/07/2026 TRANG NÀY DÙNG TÊN RIÊNG `.lang-btn` — và đó chính là lý
   do nó KHÔNG CÓ nút đổi ngôn ngữ suốt nhiều tháng mà không ai biết: CSS có đủ
   rule, JS gọi `initLang(applyLanguage, '.lang-btn')`, chỉ MARKUP là không có,
   nên chẳng có gì báo lỗi. Nay dùng `.lang-switch` như 15 trang còn lại (khung
   khai ở `css/common.css`) và `check_pages.py` mục [14] canh chuyện này. */
.lang-switch{flex:none;background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);}
body.theme-light .lang-switch{background:rgba(255,255,255,.5);}
/* ⚠️ HÌNH DẠNG nút lấy từ css/common.css (gộp 19/08/2026). Trước đó màn này khai
   `font-size:10.5px` + `border-radius:16px` nên chip ở đây VUÔNG hơn hẳn 11 màn
   khác — chủ dự án nhìn ra bằng mắt, tôi đo lại thấy đúng. Chỉ giữ hiệu ứng chuyển
   và MÀU NHẤN của chủ đề 3D ở dưới. */
.lang-switch button{transition:background .18s var(--ease),color .18s;}
.lang-switch button.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06122b;}

/* ---- Game-style journey trail (Region + Universe maps) ---- */
.nm-journey{position:relative;width:100%;}
.nm-journey svg{display:block;width:100%;height:auto;overflow:visible;}
.nm-path{fill:none;stroke:rgba(150,180,255,.28);stroke-width:2.2;stroke-dasharray:2 8;stroke-linecap:round;}
.nm-path-done{fill:none;stroke:rgba(95,211,255,.7);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2 8;}
.nm-node-g{cursor:pointer;}
.nm-node-c{stroke:rgba(255,255,255,.35);stroke-width:1.5;transition:transform .18s var(--ease);transform-box:fill-box;transform-origin:center;}
.nm-node-g:hover .nm-node-c{transform:scale(1.14);}
.nm-node-ring{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.9;}
.nm-node-glow{animation:nmNodePulse 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes nmNodePulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.35)}}
.nm-node-lab{fill:var(--ink);font-family:var(--font-display);font-weight:600;font-size:11px;dominant-baseline:middle;}
.nm-node-lab.dim{fill:var(--ink-faint);}
.nm-node-sub{fill:var(--ink-faint);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;dominant-baseline:middle;}
.nm-badge-icon{font-size:12px;dominant-baseline:central;text-anchor:middle;}
.nm-rocket{font-size:20px;dominant-baseline:central;text-anchor:middle;filter:drop-shadow(0 0 6px rgba(95,211,255,.8));}
@media (prefers-reduced-motion:reduce){ .nm-node-glow{animation:none;} }

/* ============================================================
   MERGED NAVIGATION TREE (in the left deck) — groups + subsets,
   click to collapse/expand.
   ============================================================ */
.nav-tree{display:flex;flex-direction:column;gap:4px;padding:0 2px;}
.nav-cap{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);margin:2px 4px 6px;}
.reg-group{border:1px solid transparent;border-radius:var(--radius-md);overflow:hidden;transition:background .18s,border-color .18s;}
.reg-group.current{background:rgba(95,211,255,.08);border-color:rgba(95,211,255,.28);}
.reg-head{display:flex;align-items:center;gap:9px;width:100%;padding:9px 9px;cursor:pointer;user-select:none;border-radius:var(--radius-md);transition:background .16s;}
.reg-head:hover{background:rgba(255,255,255,.06);}
body.theme-light .reg-head:hover{background:rgba(60,90,170,.08);}
.chev-wrap{width:14px;flex:none;display:flex;justify-content:center;}
.chev{font-size:9px;color:var(--ink-faint);transition:transform .22s var(--ease);display:inline-block;}
.reg-group[data-open="true"] .chev{transform:rotate(90deg);}
.chev.empty{visibility:hidden;}
.reg-ic{font-size:15px;width:20px;text-align:center;flex:none;}
.reg-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;}
.reg-eyebrow{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
.reg-title{font-family:var(--font-display);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reg-group.future .reg-title,.reg-group.future .reg-ic{opacity:.55;font-style:italic;}
/* TIÊU ĐỀ VÙNG trên màn hẹp: cho XUỐNG DÒNG thay vì cắt bằng "…".
   Đo trên iPad mini 768×1024 (31/07/2026): ở `--panel-w:300px` cột chữ của
   `.reg-head` chỉ còn 112px, mà tên vùng tiếng Việt dài hơn bản tiếng Anh
   ("Vùng lân cận Mặt Trời" cần 136px, "Ngoại hành tinh lân cận" cần 148px)
   → hiện ra "Vùng lân cận Mặt Trờ…", không còn là một cái tên.
   ⚠️ PHẢI ĐẶT SAU khai báo `.reg-title` ở ngay trên. `@media` KHÔNG làm tăng độ
      ưu tiên (specificity), nên bản đầu tôi đặt nó ở mục RESPONSIVE phía trên
      file và `white-space:nowrap` của dòng trên vẫn thắng — đo lại vẫn thấy cắt.
   ⚠️ Chỉ nới cho TIÊU ĐỀ. Câu mô tả phụ `.loc-ds` vẫn giữ ellipsis: đó là dòng
      giới thiệu MỘT dòng, cho xuống dòng thì mỗi mục dài gấp đôi và đúng cái màn
      hình nhỏ nhất phải cuộn nhiều nhất; chữ đầy đủ vẫn hiện ở bảng thông tin. */
@media (max-width:900px){
  .reg-title{white-space:normal;overflow:visible;text-overflow:clip;}
}
.reg-status{font-size:12px;flex:none;color:var(--ink-faint);}
.reg-status.here{filter:drop-shadow(0 0 5px rgba(95,211,255,.8));}
.reg-go{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);color:var(--ink-soft);font-size:14px;font-weight:700;line-height:1;display:grid;place-items:center;transition:background .16s,color .16s,transform .1s;}
.reg-go:hover{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06122b;border-color:transparent;}
.reg-go:active{transform:scale(.9);}
.reg-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.reg-group[data-open="true"] .reg-sub{max-height:760px;}
.reg-sub-inner{display:flex;flex-direction:column;gap:2px;padding:2px 6px 8px 30px;}
.loc-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);padding:7px 8px;transition:background .15s var(--ease),border-color .15s,transform .1s;}
.loc-item:hover{background:rgba(255,255,255,.07);border-color:var(--glass-brd);transform:translateX(2px);}
body.theme-light .loc-item:hover{background:rgba(60,90,170,.08);}
.loc-item.active{background:rgba(95,211,255,.16);border-color:rgba(95,211,255,.42);}
.loc-item.preview{opacity:.62;}
.loc-item.preview:hover{transform:none;}
.loc-dot{width:17px;height:17px;border-radius:50%;flex:none;box-shadow:inset -2px -2px 4px rgba(0,0,0,.4);}
.loc-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;}
.loc-nm{font-family:var(--font-display);font-weight:600;font-size:12.5px;}
.loc-ds{font-size:10px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loc-here{font-size:12px;filter:drop-shadow(0 0 5px rgba(95,211,255,.8));}
.loc-lock{font-size:11px;color:var(--ink-faint);}
.loc-lock--open{color:var(--accent);}
.loc-empty{font-size:11.5px;color:var(--ink-faint);text-align:center;padding:8px;}

/* ---- Solar Neighborhood 3D view ---- */
#nbh{position:fixed;inset:0;z-index:5;display:none;
  background:radial-gradient(ellipse at 50% 32%, #12204d 0%, #0a1030 55%, #06091c 100%);}
#nbh.show{display:block;}
#nbh-canvas{position:absolute;inset:0;}
#nbh-canvas canvas{display:block;}
#nbh-labels{position:absolute;inset:0;z-index:2;pointer-events:none;}
.nbh-lab{
  pointer-events:auto;cursor:pointer;font:600 11px/1 var(--font-display,sans-serif);letter-spacing:.05em;
  color:#eaf1ff;background:rgba(16,24,56,.55);border:1px solid rgba(150,180,255,.25);
  padding:3px 9px;border-radius:20px;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .15s,transform .15s;}
.nbh-lab:hover{background:rgba(95,211,255,.3);transform:scale(1.06);}
.nbh-lab.sun{color:#3a1e00;background:linear-gradient(135deg,var(--sun),var(--sun-warm));border-color:transparent;}
.nbh-top{position:fixed;z-index:8;top:18px;left:50%;transform:translateX(-50%);
  padding:9px 18px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.04em;color:var(--ink);display:inline-flex;align-items:center;gap:8px;}
.nbh-hint{position:fixed;z-index:8;top:64px;left:50%;transform:translateX(-50%);
  padding:7px 14px;border-radius:999px;font-size:11px;color:var(--ink-soft);white-space:nowrap;}
.nbh-back{position:fixed;z-index:8;bottom:22px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--glass-brd);
  border-radius:var(--radius-md);padding:12px 22px;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink);
  transition:background .16s,border-color .16s,transform .1s;}
.nbh-back:hover{background:rgba(255,255,255,.12);border-color:var(--glass-brd-strong);}
.nbh-back:active{transform:translateX(-50%) scale(.97);}
@media (max-width:720px){
  .nbh-top{top:70px;font-size:12px;padding:8px 14px;}
  .nbh-hint{display:none;}
}

/* ---- Star info panel (Solar Neighborhood) ---- */
#star-info{position:fixed;z-index:15;top:18px;right:18px;bottom:18px;width:var(--info-w);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .5s var(--ease);}
#star-info.open{transform:none;opacity:1;pointer-events:auto;}
.star-visual{position:relative;z-index:1;width:100%;height:168px;border-radius:var(--radius-lg);overflow:hidden;background:#0a1030;display:grid;place-items:center;}
.star-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%, rgba(95,150,255,.12), transparent 60%);}
.star-orb{width:120px;height:120px;border-radius:50%;position:relative;z-index:1;animation:starPulse 3.4s ease-in-out infinite;}
@keyframes starPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){ .star-orb{animation:none;} }
.star-foot{flex:none;display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--glass-brd);}
.star-foot button{border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);border-radius:var(--radius-md);padding:10px 12px;font-size:13px;font-weight:600;color:var(--ink);transition:background .16s,transform .1s;}
body.theme-light .star-foot button{background:rgba(255,255,255,.5);}
.star-foot button:hover{background:rgba(255,255,255,.12);}
.star-foot button:active{transform:scale(.96);}
.star-foot #star-prev,.star-foot #star-next{flex:none;width:44px;font-size:16px;}
.star-foot .mid{flex:1;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06122b;border-color:transparent;}
@media (max-width:720px){ #star-info{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:74vh;transform:translateY(calc(100% + 20px));} }

/* ---- Solar Neighborhood diagram (Sun + nearby stars) ---- */
.nm-place .card{max-height:92vh;overflow:auto;}
.nm-place .card.wide{max-width:800px;}
.nm-diagram{width:100%;margin:14px 0 2px;}
.nm-diagram svg{width:100%;height:auto;display:block;overflow:visible;}
.nb-ring{fill:none;stroke:rgba(120,150,255,.32);stroke-width:1.2;}
.nb-ringlab{fill:var(--ink-faint);font-size:9px;dominant-baseline:middle;}
.nb-stalk{stroke:rgba(120,220,150,.55);stroke-width:1.4;stroke-dasharray:2 4;}
.nb-base{fill:rgba(180,200,255,.55);}
.nb-halo{opacity:.28;}
.nb-star{cursor:pointer;}
.nb-dot{stroke:rgba(255,255,255,.55);stroke-width:1.2;transition:transform .16s var(--ease);transform-box:fill-box;transform-origin:center;}
.nb-star:hover .nb-dot{transform:scale(1.32);}
.nb-star:hover .nb-lab{fill:var(--accent);}
.nb-star:focus-visible{outline:none;}
.nb-star:focus-visible .nb-dot{transform:scale(1.32);}
.nb-lab{fill:var(--ink);font-family:var(--font-display);font-weight:600;font-size:11px;paint-order:stroke;stroke:rgba(6,9,28,.65);stroke-width:3px;}
.nb-sun{fill:#ffd36b;}
.nb-sun-glow{fill:#ffcf6b;opacity:.4;}
.nb-sunlab{fill:var(--ink);font-family:var(--font-display);font-weight:700;font-size:12px;paint-order:stroke;stroke:rgba(6,9,28,.65);stroke-width:3px;}
.nb-scale{stroke:rgba(150,180,255,.75);stroke-width:1.4;}
.nb-scalelab{fill:var(--ink-soft);font-size:9.5px;}
@media (max-width:720px){
  .nm-widget{top:14px;left:72px;width:196px;max-height:calc(100vh - 28px);}
  .nm-toast{top:70px;left:72px;}
}

/* ============================================================
   VÙNG CHẠM 44px TRÊN THIẾT BỊ CẢM ỨNG — lý do đầy đủ ghi ở `css/common.css`.
   Trang này là chỗ nhiều nút nhỏ nhất, đo trên iPad mini 768×1024 (31/07/2026):
   thanh trượt tốc độ CAO 5px, nút `→` của vùng 26×26, nút gập bảng 32×32, nút
   đóng bảng thông tin 34×34, `‹`/`›` chuyển sao 44×42, nút điều hướng 37px,
   ô tìm kiếm 39px, dòng chọn địa điểm 33–42px.
   ⚠️ `min-width`/`min-height` GHI ĐÈ ĐƯỢC `width`/`height` cố định (bề rộng dùng
      thật là clamp(min, width, max)), nên không phải xoá giá trị cũ.
   ============================================================ */
@media (pointer: coarse){
  .deck-collapse, .info-close, .reg-go{min-width:44px;min-height:44px;}
  .search input, .btn, .nav-btn, .home-btn, .mid,
  .loc-item, .reg-head, #star-prev, #star-next{min-height:44px;}
  #star-prev, #star-next{min-width:44px;}
  /* Thanh trượt tốc độ: track chỉ 5px nên ngón tay không bắt được. Nới VÙNG BẤM
     bằng padding dọc (giữ track mảnh cho đẹp) và phóng to núm kéo. */
  #speed{min-height:44px;padding:19px 0;background:transparent;}
  #speed::-webkit-slider-thumb{width:22px;height:22px;}
  #speed::-moz-range-thumb{width:22px;height:22px;}
}

/* ============================================================
   COMET DẪN ĐƯỜNG Ở LƯỢT ONBOARDING (js/map-onboard.js · decisions/003)

   Vỏ box, khung avatar, tên/vai lấy từ `css/mascot.css` (`.aq-say`/`.aq-ava`/
   `.aq-nm`/`.aq-tag`) — ở đây CHỈ có phần riêng: neo đáy màn, hiện/ẩn, cỡ chữ.

   ⚠️ CHỮ TO HƠN hai màn kia (17px so với 14,5px của `mission-intro` và 14px của
   `mission-earth`) — chủ dự án chốt "chữ to, rõ ràng, dễ đọc". Đây là lời dẫn ĐẦU
   TIÊN trẻ đọc trong app, và đọc trong lúc còn đang ngắm một cảnh 3D nhiều chi tiết.

   ⚠️ NEO ĐÁY, KHÔNG NEO GIỮA. Bảng thông tin hành tinh (`#info`) chiếm hẳn mép PHẢI
   rộng 400px và bảng điều khiển chiếm mép TRÁI ~296px; giữa màn là chỗ duy nhất còn
   thấy được hành tinh. Cùng lý do `mission-intro` neo đáy.
   ============================================================ */
.mo-say{--aq-ava:56px;--aq-ava-r:16px;
  position:fixed;left:50%;transform:translateX(-50%) translateY(16px);
  bottom:clamp(18px,4.5vh,48px);z-index:14;
  width:min(700px,calc(100vw - 28px));
  display:flex;gap:14px;align-items:flex-start;padding:16px 20px 15px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s;}
.mo-say.show{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);}

/* ⚠️ BẢNG THÔNG TIN MỞ RA THÌ BOX PHẢI DỜI SANG TRÁI. Đo được trên màn 1440px:
   box rộng 700px canh giữa (370 → 1070) đè lên `#info` (bắt đầu ở 1022) **5.363px²** —
   đúng lúc trẻ cần đọc cả hai. Sửa bằng cách canh giữa phần màn hình CÒN LẠI bên trái
   bảng, và hạ bề rộng tối đa theo `--info-w` để không bao giờ chạm vào nó.
   Dùng `~` được vì `#mo-say` nằm SAU `#info` trong DOM (`explorer.html:194` vs `:256`) —
   không cần `:has()` hay một class do JS bật, tức là không có đường nào lệch nhau. */
/* ⚠️ PHẢI GIỚI HẠN Ở `min-width:721px`. `--info-w` là 400px, nên trên màn 390px thì
   `calc(100vw - 400px - 46px)` ra **−56px**: bề rộng âm bị coi là 0, box co lại còn
   một cột chữ và cao **623px**, tràn hẳn khỏi khung nhìn. Đo được bằng
   `smoke_map_onboard.py` mục [8]. Mốc 721px khớp `@media (max-width:720px)` — nơi
   `#info` đổi sang neo đáy và không còn nằm ở mép phải nữa. */
@media (min-width:721px){
  #info.open ~ .mo-say{
    width:min(700px, calc(100vw - var(--info-w) - 46px));
    left:calc((100vw - var(--info-w) - 36px) / 2);
  }
}

/* ⚠️ MÀN HẸP (≤720px): BẢNG THÔNG TIN NEO ĐÁY VÀ CAO 74vh (xem `#info` trong
   `@media (max-width:720px)`), tức nó chiếm ĐÚNG chỗ box thoại đang đứng. Dời box
   LÊN TRÊN bảng — cùng mốc `calc(74vh + 16px)` mà `#nav` đã dùng ở đó, nên hai thứ
   không tự trôi khỏi nhau khi chiều cao bảng đổi.
   ⚠️ TUYỆT ĐỐI KHÔNG ẨN BOX ĐI. Bản đầu tôi viết `visibility:hidden` cho ca này và
      đó là một cái bẫy: câu hỏi "sẵn sàng chưa?" cùng nút OK nằm TRONG box, ẩn nó là
      trẻ trên điện thoại **không bao giờ thấy đường đi tiếp và kẹt cứng**. */
@media (max-width:720px){
  #info.open ~ .mo-say{bottom:calc(74vh + 16px);}
}

.mo-body{min-width:0;flex:1;}
.mo-who{display:flex;align-items:baseline;gap:9px;}
.mo-who .aq-nm{font-size:14px;}
/* 17px: cỡ chữ chủ dự án yêu cầu. `min-height` giữ box khỏi nhảy khi gõ từng chữ. */
.mo-line{font-size:17px;line-height:1.58;color:var(--ink);margin:7px 0 0;min-height:2.9em;}
.mo-line b{color:#a5e4ff;}

.mo-next{align-self:flex-end;flex:none;margin-top:auto;cursor:pointer;border:none;
  min-height:44px;padding:11px 18px;border-radius:13px;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  color:#04060f;background:linear-gradient(120deg,var(--accent,#5fd3ff),var(--accent-2,#8f7bff));
  box-shadow:0 10px 22px -12px rgba(95,211,255,.85);
  transition:transform .28s var(--jelly),filter .18s,opacity .25s;}
.mo-next:hover{filter:brightness(1.08);transform:translateY(-2px);}
.mo-next:active{transform:scale(.94);}
.mo-next.hide{opacity:0;pointer-events:none;}

@media (max-width:600px){
  /* Điện thoại: nút xuống hàng riêng và chiếm cả bề rộng — 44px vùng chạm vẫn giữ. */
  .mo-say{flex-wrap:wrap;padding:14px 15px 13px;gap:11px;--aq-ava:46px;--aq-ava-r:14px;}
  .mo-line{font-size:15.5px;}
  .mo-next{width:100%;}
}