/* ============================================================================
   SẢNH KIỂU WINDOWS — lớp CSS RIÊNG của cs16-portable, đè lên 98.css
   ============================================================================

   VÌ SAO CÓ FILE NÀY (thay vì dùng thẳng 98.css):

   98.css là thư viện "Windows 98" viết cho một trang CHỈ CÓ giao diện đó. Nó có vài rule
   toàn cục không thể dùng chung với trang game:

     · `button { width:16px; height:16px; ... }` — mọi nút thành 16x16. Nút "Vào game",
       "Tạo & vào ngay" của sảnh sẽ teo lại thành ô vuông không đọc được chữ.
     · `#desktop,canvas { position:fixed; width:100vw; height:100vh }` — áp lên MỌI canvas,
       kể cả canvas của engine. (Đã bỏ `,canvas` khỏi 98.css.)
     · `body { background: var(--window-bg) }` — nền xám XP, trong khi lúc chơi cần nền đen.

   Nên: giữ 98.css cho phần "khung cửa sổ" (title-bar, viền, nút min/max/close — những thứ
   đúng như bản dev), còn MỌI thứ khác do file này quyết định. File này nạp SAU 98.css nên
   thắng ở cùng độ ưu tiên; chỗ nào 98.css dùng selector nặng hơn thì ghi rõ selector ở đây.
   ============================================================================ */

/* ---- BIẾN + NỀN ---------------------------------------------------------- */

:root {
  /* Nền desktop XP: ảnh thật của bản dev, không phải gradient bịa. */
  --wallpaper: url(/winui/winxp-background.jpeg);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  /* Mặc định (lúc chơi) nền ĐEN. Chỉ khi ở sảnh mới đổi sang hình nền desktop — xem
     `body.in-game` bên dưới. Đặt đen trước để không bao giờ thấy vệt xám XP quanh canvas. */
  background: #000;
  color: #e8eaed;
  font: 14px/1.5 Tahoma, 'Segoe UI', -apple-system, sans-serif;
}

/* ---- SẢNH: DESKTOP XP + MỘT CỬA SỔ --------------------------------------- */

/* `.desktop` chỉ tồn tại khi ở sảnh. Nó là lớp phủ kín khung nhìn chứa hình nền XP và cửa sổ
   căn giữa. Dùng `position: fixed; inset: 0` + flex căn giữa — giống bản dev. */
.desktop {
  position: fixed;
  inset: 0;
  z-index: 2;
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px 16px;
}
.desktop[hidden] { display: none; }

/* Khung cửa sổ: 98.css lo viền/title-bar, ở đây chốt kích thước và cho cuộn ruột.
   `max-height: 92vh` để cửa sổ không tràn ra ngoài màn hình thấp. */
.desktop .window {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

/* Ruột cửa sổ cuộn được, còn title-bar đứng yên — giống cửa sổ thật. */
.desktop .window-body {
  overflow: auto;
  padding: 0 0 12px;
  background: var(--window-bg);
  color: var(--window-fg);
}

/* Banner CS 1.6 trên cùng ruột cửa sổ (như bản dev). */
.desktop .banner-image {
  display: block;
  width: 100%;
}

/* Khối nội dung có lề, tách khỏi banner tràn viền. */
.win-section {
  padding: 12px 14px 0;
}

/* ---- TIÊU ĐỀ + CHÚ THÍCH TRONG CỬA SỔ ----------------------------------- */

.win-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
}
.win-sub {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #4a5561;
}

/* ---- ĐIỀU KHIỂN: NÚT / Ô NHẬP / CHỌN ------------------------------------ */

/* 98.css đặt `button { width:16px; height:16px }` cho MỌI nút — phải ghi đè, nếu không nút
   của sảnh teo thành ô vuông. Dùng `.window-body button` (specificity cao hơn `button`) để
   thắng chắc chắn, không phụ thuộc thứ tự nạp file. */
.window-body button,
.desktop button.btn98 {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 88px;
  padding: 3px 14px 4px;
  font: 13px/1.4 Tahoma, 'Segoe UI', sans-serif;
  color: #000;
  background: linear-gradient(180deg, #fff, #f0f0ea);
  border: 1px solid #003c74;
  border-radius: 4px;
  box-shadow: -1px -1px #e2ded4, 1px 1px #fbfaf8, inset -1px -2px 1px #d6d0c5;
  cursor: pointer;
  white-space: nowrap;
}
.window-body button:hover:not(:disabled) { filter: brightness(1.06); }
.window-body button:active:not(:disabled) {
  box-shadow: inset 1px 1px #a0a0a0;
  filter: brightness(0.97);
}
.window-body button:disabled { opacity: 0.55; cursor: default; }
.window-body button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* Nút phụ (Làm mới, Đo ping, Rời phòng…) nhìn nhẹ hơn nút chính. */
.window-body button.ghost,
a.btn98.ghost {
  min-width: 0;
  font-weight: 400;
}
.window-body button.tiny {
  min-width: 0;
  padding: 2px 10px 3px;
  font-size: 12.5px;
}

/* Liên kết trông như nút (nút "Đo ping" mở tab mới — phải là <a>, không phải <button>). */
a.btn98 {
  display: inline-block;
  padding: 3px 14px 4px;
  font: 13px/1.4 Tahoma, 'Segoe UI', sans-serif;
  color: #000;
  background: linear-gradient(180deg, #fff, #f0f0ea);
  border: 1px solid #003c74;
  border-radius: 4px;
  box-shadow: -1px -1px #e2ded4, 1px 1px #fbfaf8, inset -1px -2px 1px #d6d0c5;
  text-decoration: none;
  cursor: pointer;
}
a.btn98:hover { filter: brightness(1.06); }

/* Ô nhập / chọn kiểu XP: nền trắng, viền lõm. */
.window-body input[type='text'],
.window-body input:not([type]),
.window-body select {
  font: 13px/1.4 Tahoma, 'Segoe UI', sans-serif;
  padding: 3px 6px;
  color: #000;
  background: #fff;
  border: 1px solid #7f9db9;
  border-radius: 0;
  box-shadow: inset 1px 1px #a0a0a0;
  min-width: 0;
}
.window-body input:focus,
.window-body select:focus { outline: 1px dotted #000; outline-offset: -3px; }

/* Hàng điều khiển. */
.win-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}
.win-row > .grow { flex: 1; min-width: 0; }
.win-row.right { justify-content: flex-end; }

/* Nhóm (fieldset của XP) — dùng cho "Phòng đang mở" và "Tạo phòng mới". */
.win-group {
  border: 1px solid #d0cec4;
  border-top-color: #fff;
  border-left-color: #fff;
  background: #f5f4ec;
  padding: 8px 10px 10px;
  margin: 10px 0;
}
.win-group > legend,
.win-group > strong.legend {
  font-weight: 700;
  font-size: 12.5px;
  padding: 0 4px;
}
.win-group > strong.legend {
  display: block;
  margin: -16px 0 8px;
  background: #f5f4ec;
  width: fit-content;
  position: relative;
  top: -8px;
  margin-bottom: -4px;
}

/* ---- THANH TIẾN TRÌNH (nạp 253MB) --------------------------------------- */

/* Thanh tiến trình kiểu XP: rãnh lõm + khối xanh. Dùng <progress> như bản dev để có sẵn
   thuộc tính value/max và trình duyệt tự tính phần trăm. */
progress.win-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  border: 1px solid #7f9db9;
  background: #fff;
  box-shadow: inset 1px 1px #a0a0a0;
  border-radius: 0;
}
progress.win-progress::-webkit-progress-bar {
  background: #fff;
  box-shadow: inset 1px 1px #a0a0a0;
}
progress.win-progress::-webkit-progress-value {
  background: linear-gradient(180deg, #7fd97f, #35a635 55%, #1e8a1e);
}
progress.win-progress::-moz-progress-bar {
  background: linear-gradient(180deg, #7fd97f, #35a635 55%, #1e8a1e);
}

/* ---- TRẠNG THÁI --------------------------------------------------------- */

#status {
  margin: 8px 0 0;
  padding: 6px 8px;
  font-size: 12.5px;
  background: #ffffe1;
  border: 1px solid #d0cec4;
  color: #000;
  min-height: 18px;
}
#status[data-kind='error'] { background: #ffe1e1; border-color: #c88; color: #7a1a1a; }
#status[data-kind='ok'] { background: #e1ffe1; border-color: #8c8; color: #1a5c1a; }
#status[data-kind='warn'] { background: #fff4d1; border-color: #d8b44a; color: #6b4e00; }

/* ---- DANH SÁCH PHÒNG --------------------------------------------------- */

/* Bảng phòng kiểu danh sách của Explorer: nền trắng, dòng kẻ, dòng đang chọn xanh. */
.rooms {
  border: 1px solid #7f9db9;
  background: #fff;
  max-height: 210px;
  overflow: auto;
}
.rooms .room {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
}
.rooms .room:last-child { border-bottom: 0; }
.rooms .room.sel { background: #316ac5; color: #fff; }
.rooms .room.sel .sub,
.rooms .room.sel .sub2 { color: #d6e2f7; }
.rooms .room .grow { flex: 1; min-width: 0; }
.rooms .room .nm { font-weight: 700; font-size: 13px; }
.rooms .room .sub,
.rooms .room .sub2 { font-size: 12px; color: #5a6472; }
.rooms .room .badge {
  font-size: 11px;
  padding: 0 5px;
  border: 1px solid #b9c3cf;
  background: #eef2f7;
  color: #2a4a6b;
}
.rooms .room.sel .badge { background: #dbe7f8; color: #1a3a5c; border-color: #9fb6d4; }
.rooms .room .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #b0b8c0; flex: 0 0 auto;
}
.rooms .room .dot.ready { background: #2f9e44; }
.rooms .room .dot.starting { background: #d8a63a; }
.rooms .hint, .rooms > .muted { display: block; padding: 8px; font-size: 12.5px; color: #5a6472; }

/* Nút "Xoá" của admin: đỏ để không lẫn với "Chọn"/"Vào", và vì đây là hành động phá huỷ (đá cả
   phòng ra). Đỏ nhạt + chữ đỏ, không phải nền đỏ đặc: nút XP nhỏ nằm cạnh nhau, nền đặc trông
   nặng và lấn át các nút khác trên cùng dòng. */
.window-body button.danger {
  color: #8a1a1a;
  border-color: #b98a8a;
}
.window-body button.danger:hover:not(:disabled) {
  background: #ffecec;
}
/* Bước xác nhận thứ hai ("Chắc chắn?"): đậm lên để mắt thấy ngay đây là lần bấm THẬT SỰ xoá. */
.window-body button.danger.armed {
  background: #e8b0b0;
  border-color: #8a1a1a;
  font-weight: 700;
}

/* ---- CHÚ THÍCH NHỎ ----------------------------------------------------- */

.muted { color: #4a5561; font-size: 12px; }
.win-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #4a5561;
}
code {
  background: #e8e6dc;
  border: 1px solid #d0cec4;
  padding: 0 3px;
  font: 12px ui-monospace, monospace;
  color: #000;
}
a { color: #003399; }

/* ---- LÚC CHƠI: ẨN HẾT GIAO DIỆN WINDOWS --------------------------------- */

/* Vào trận thì `#desktop` biến mất (JS đặt `hidden`), nhưng giữ thêm rule theo class
   `body.in-game` để không bao giờ còn sót nền XP hay cửa sổ nào phía sau canvas. */
body.in-game .desktop { display: none; }
body.in-game { background: #000; }

/* ============================================================================
   CỤM ĐIỀU KHIỂN TRONG TRẬN: MỜ, BÁM SÁT GÓC
   ============================================================================

   Yêu cầu: "show kiểu button menu mờ như hiện tại nhưng thiết kế cho nó bám sát vào góc ấy".

   `top: 0; right: 0` (không phải 8px) và bỏ bo góc ở hai phía ngoài để nút nằm LIỀN một góc màn
   hình — giống tab/ribbon gắn vào cạnh. Đây cũng là cách nó chiếm ít mắt nhất: mọi thứ khác đều
   có lề, riêng cụm này dán vào góc nên không \"lơ lửng\" giữa hình game.
   Phải dùng `border-radius: 0` cho phía ngoài, vì skin XP bo 4px cả bốn góc thì nút dán góc vẫn
   trông như một vật rời nằm đè lên. */
#ingameBar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  /* Không đệm phía trên/phải -> bám sát hai cạnh màn hình. */
  padding: 0;
}
#ingameBar[hidden] { display: none; }

/* Trạng thái ngắn khi đang chơi (mất kết nối, đang vào phòng…). */
#ingameStatus {
  font: 12px/1.4 Tahoma, 'Segoe UI', sans-serif;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 3px 8px;
  border-radius: 3px;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Canh giữa theo chiều dọc của nút Menu (nút cao ~25px) để hàng trông thẳng. */
  margin-top: 3px;
}
#ingameStatus:empty { display: none; }
#ingameStatus[data-kind='error'] { background: rgba(120, 20, 20, 0.85); border-color: #f0a0a0; }
#ingameStatus[data-kind='ok'] { background: rgba(20, 80, 30, 0.8); border-color: #9fe0a8; }
#ingameStatus[data-kind='warn'] { background: rgba(110, 80, 10, 0.85); border-color: #f0d090; }

/* ---- TỰ TẮT KIỂU TOAST ---------------------------------------------------
   Yêu cầu: "các trạng thái khi show xong tầm vài s thì phải tắt chứ kiểu toast ấy".

   JS (hàm `status()` trong client.js) quyết định THỜI ĐIỂM, CSS lo phần NHÌN. Chia như vậy vì
   thời lượng là logic (4s, và lỗi/cảnh báo thì không tắt), còn mờ dần là trình bày.
   Thời lượng ở đây PHẢI khớp `TOAST_FADE_MS` trong client.js: JS chờ đúng ngần này rồi mới xoá
   chữ, nếu CSS dài hơn thì chữ bị cắt cụt giữa lúc đang mờ.

   `transition` đặt trên cả hai trạng thái nên lúc HIỆN cũng mượt, không chỉ lúc tắt. */
#status,
#ingameStatus {
  transition: opacity 0.35s ease-out;
}
#status.toast-out,
#ingameStatus.toast-out {
  opacity: 0;
  /* Không bắt chuột khi đã mờ: hộp nằm ở góc phải trên, đúng chỗ nút Menu. */
  pointer-events: none;
}

/* Việc CẦN ĐỌC NGAY thì không mờ: mất kết nối / cảnh báo. Người chơi phải thấy dù con trỏ
   đang ở giữa màn hình. `ok` ("Đang chạy") vẫn mờ — bình thường không cần đọc. */
#ingameBar > #ingameStatus[data-kind='error'],
#ingameBar > #ingameStatus[data-kind='warn'] {
  opacity: 1;
}

/* Nút "Vào lại" (reconnect) cũng nằm trong cụm này, nên mặc định bị mờ theo. Nhưng nó chỉ hiện
   RA ĐÚNG LÚC mất kết nối — tức là lúc người chơi cần nó nhất. Để mờ thì họ thấy dòng "Mất kết
   nối" mà không thấy đường vào lại. Luôn sáng khi nó đang hiện. */
#ingameBar > #reconnect:not([hidden]) {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   MỜ KHI RẢNH — đặt `opacity` trên TỪNG CON, không đặt trên cả cụm.
   ---------------------------------------------------------------------------
   Yêu cầu: "show kiểu button menu mờ như hiện tại".

   VÌ SAO Ở TỪNG CON: `opacity` của phần tử cha NHÂN xuống con, nên đặt ở `#ingameBar` thì mọi
   con bị chặn trần ở giá trị đó — không cách nào cho dòng báo lỗi hay nút "Vào lại" sáng trở
   lại (hai rule ngay trên sẽ vô hiệu). Đặt trên `> *` thì mỗi con tự quyết định, và hai rule
   trên mới có tác dụng.

   VỀ `:hover`: lúc đang chơi engine GIAM con trỏ chuột (pointer lock) nên `:hover` KHÔNG bao
   giờ bật — đo được `hover:false` dù `elementFromPoint` đúng là nút. Nên hover không thể là
   đường duy nhất để nút sáng; nó chỉ dùng được khi con trỏ tự do (menu đang mở / vừa Esc). */
#ingameBar > * {
  opacity: 0.32;
  transition: opacity 0.16s ease-out;
}
/* Sáng hoàn toàn khi trỏ vào hoặc khi đi bằng bàn phím (`Tab`). */
#ingameBar:hover > *,
#ingameBar:focus-within > * {
  opacity: 1;
}
/* Menu đang mở thì nút Menu phải sáng, nếu không người dùng không biết mình vừa bấm cái gì. */
#ingameBar[data-menu-open='1'] > * { opacity: 1; }

/* Nút Menu dán sát góc: bỏ bo góc ở hai phía ngoài (trên-phải) để liền một khối với góc màn
   hình, thay vì trông như một vật rời nằm đè lên. */
#ingameBar > #menuBtn {
  min-width: 0;
  border-radius: 0 0 0 4px;
}

/* ---- MENU TRONG GAME (Shift+Esc) — giữ kiểu Windows cho đồng bộ --------- */

#escMenu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font: 14px/1.5 Tahoma, 'Segoe UI', sans-serif;
}
#escMenu[hidden] { display: none; }

/* ============================================================================
   MỘT MỤC CẤU HÌNH (trong tab "Cấu hình" ở sảnh)
   ============================================================================
   Cùng khuôn với `.cmd-row` của menu trong trận, nhưng có ô điều khiển nhập được. */
/* Lưới 3 cột: nhãn | mô tả | ô điều khiển. Dùng grid (không flex) để nhãn ở mọi hàng thẳng cột
   với nhau — mắt quét xuống thấy ngay đâu là tên, đâu là giá trị. */
.set-row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #e4e1d7;
}
.set-row:last-child { border-bottom: none; }
.set-row > .set-name { font-size: 12.5px; font-weight: 700; }
.set-row > .set-mo { font-size: 12px; color: #4a5561; line-height: 1.35; min-width: 0; }
.set-row > .set-ctl { display: flex; align-items: center; gap: 6px; justify-self: end; }
.set-row > .set-ctl input[type='number'] { width: 72px; text-align: right; }
.set-row > .set-ctl input[type='text'] { width: 96px; }
.set-row .set-val { font-size: 12px; color: #4a5561; min-width: 46px; text-align: right; }
/* Ô nhập giá trị không hợp lệ: viền đỏ + nền hồng nhạt. Dùng cả viền LẪN nền để nhìn ra được
   kể cả khi người chơi mù màu đỏ. */
.set-row input.set-bad {
  background: #ffe1e1 !important;
  border-color: #c00 !important;
  box-shadow: inset 1px 1px #e0a0a0 !important;
}
.set-row .set-help { font-size: 11.5px; color: #a00; }

/* ---- CÔNG TẮC (switch) cho mục bật/tắt ---- */
/* Yêu cầu: "cái nào bật tắt thì nhớ để switch". Dựng công tắc từ input[type=checkbox] của 98.css
   thay vì tự vẽ: giữ được bàn phím (Tab/Space) và trình đọc màn hình, thứ mà một <div> giả
   công tắc không có. Nhãn ON/OFF nằm cạnh để trạng thái đọc được bằng chữ, không chỉ bằng màu. */
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.switch input[type='checkbox'] { width: 15px; height: 15px; flex: none; }
.switch .switch-nhan { font-size: 11.5px; color: #4a5561; min-width: 30px; }
.switch input:checked ~ .switch-nhan { color: #046a04; font-weight: 700; }
#settingsActions { border-top: 1px solid #cdc9bd; margin-top: 10px; padding-top: 10px; }
#settingsNote { font-size: 12px; }
#settingsNote[data-kind='ok'] { color: #046a04; }
#settingsNote[data-kind='err'] { color: #a00; }
#settingsNote[data-kind='warn'] { color: #7a4a00; }

/* Panel menu cũng là một cửa sổ XP. */
#escMenu .window {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#escMenu .window-body {
  /* Cửa sổ là flex column và có `max-height: 90vh`. Body PHẢI cũng là flex column thì
     `flex: 1` trên `.tab-panel` mới có tác dụng — đo được lúc chưa đặt: panel cao 1264px, đẩy
     nút "Rời phòng" xuống y=1392 trong khung nhìn 900px, tức là nút biến mất khỏi màn hình.
     `overflow: hidden` vì việc cuộn do CHÍNH panel lo; để body cuộn nữa là hai thanh cuộn lồng nhau. */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 12px;
  background: var(--window-bg);
  color: var(--window-fg);
}
/* Tab và hàng nút dưới cùng giữ nguyên cỡ; chỉ panel được giãn/co. */
#escMenu .window-body > .tabs,
#escMenu .window-body > .win-row {
  flex: 0 0 auto;
}

/* ---- TAB trong menu (Phòng / Lệnh / Phím) ---- */

/* Tab kiểu Windows: nút dính liền khối nội dung, tab đang chọn nhô lên và cùng màu nền
   với khối dưới nên trông như liền một khối — đúng cách tab của Win98/XP.
   Cách làm: tab đang chọn có `padding-bottom` lớn hơn phần nội dung đè lên 1px, và
   `position: relative; z-index: 1` để đường viền của khối nội dung không cắt qua nó. */
.tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 -1px;
  padding: 0 2px;
  border-bottom: 1px solid var(--window-border, #919b9c);
}
.tab {
  min-width: 0;
  padding: 3px 14px 4px;
  font: 12.5px/1.4 Tahoma, 'Segoe UI', sans-serif;
  color: #000;
  background: #ece9d8;
  border: 1px solid #919b9c;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  position: relative;
  top: 1px;
  cursor: pointer;
}
.tab:hover:not(.active) { background: #f5f3ea; }
.tab.active {
  background: var(--window-bg);
  font-weight: bold;
  /* Nhô lên 2px + phủ lên đường kẻ của khối nội dung -> liền khối, đúng kiểu tab Windows. */
  top: 0;
  padding-bottom: 5px;
  z-index: 1;
}
.tab-panel {
  border: 1px solid #919b9c;
  background: var(--window-bg);
  padding: 10px 12px 12px;
  /* Menu phải cuộn được: tab Lệnh có 27 dòng, tab Phím có bảng dài.
     Đo được: nội dung tab Lệnh cao 1262px. Trước để 52vh (468px) thì cửa sổ chỉ cao 602px
     trong khi khung nhìn 900px — thừa chỗ mà vẫn phải cuộn nhiều. Để `flex: 1` + `min-height: 0`
     cho panel tự giãn hết phần còn lại của cửa sổ (cửa sổ đã có `max-height: 90vh`), nên tận
     dụng hết chỗ và cuộn ít hơn hẳn. `min-height: 0` là BẮT BUỘC: không có nó thì flex item
     không co lại dưới cỡ nội dung và panel đẩy cửa sổ cao vượt khung nhìn.
     KHÔNG chuyển `overflow` lên `.window-body`: nút "Rời phòng" nằm ngoài panel, để body cuộn
     thì nút đó trôi mất khi người dùng cuộn xuống xem bảng lệnh. */
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.tab-panel[hidden] { display: none; }
.tab-panel .win-group:first-child > strong.legend:first-child { margin-top: 0; }

/* ---- TAB Ở SẢNH (Phòng | Cấu hình) ----
   Dùng chung khuôn `.tabs`/`.tab` ở trên, nhưng KHÔNG dùng `flex: 1` của `.tab-panel` (rule đó
   viết cho menu trong trận, nơi cửa sổ là flex column cao tối đa 90vh và panel phải tự giãn để
   cuộn). Ở sảnh cửa sổ cao theo nội dung, nên panel chỉ cần đúng chiều cao nội dung — để `flex:1`
   thì panel bị kéo giãn hoặc co lại sai, và `overflow: auto` sinh thanh cuộn lồng trong thanh cuộn
   của trang. */
.tabs#lobbyTabs {
  margin: 12px 14px -1px;
  padding: 0;
}
[data-lpanel] {
  flex: none;
  min-height: 0;
  overflow: visible;
  margin: 0 14px;
}
[data-lpanel] > .win-group:first-child { margin-top: 8px; }

/* ---- Bảng lệnh CS 1.6 (bấm là chạy) ---- */

.cmd-list { display: flex; flex-direction: column; gap: 4px; }
.cmd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted #d0cec4;
}
.cmd-row:last-child { border-bottom: none; }
.cmd-row code {
  flex: 0 0 auto;
  min-width: 168px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #ccc8bb;
  padding: 1px 5px;
}
.cmd-row .desc { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.cmd-row button { min-width: 0; padding: 1px 9px 2px; font-size: 12px; }
/* Dòng chỉ để đọc (không nên bấm nhầm) — làm mờ nhẹ để phân biệt với dòng bấm được. */
.cmd-row.readonly { opacity: 0.72; }

/* Bảng phím tắt: 4 cột (phím · việc · phím · việc). */
.key-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.key-table td { padding: 2px 6px 2px 0; vertical-align: top; }
.key-table td:nth-child(odd) { width: 1%; white-space: nowrap; }
#escMenu h2 { margin: 0 0 2px; font-size: 15px; }
#escMenu .sub { color: #4a5561; font-size: 12.5px; margin: 0 0 10px; }
#escMenu .sec { margin: 10px 0 0; }
#escMenu .sec > strong { display: block; margin-bottom: 6px; font-size: 12.5px; }
#escMenu .hint { color: #4a5561; font-size: 12px; margin: 6px 0 0; }

/* ---- MÀN HÌNH HẸP ------------------------------------------------------- */

@media (max-width: 620px) {
  .desktop { padding: 12px 8px; align-items: flex-start; }
  .desktop .window { max-width: 100%; max-height: calc(100vh - 24px); }
  .window-body button, a.btn98 { min-width: 0; }
  .win-row { gap: 6px; }
}

/* ---- NÚT MIN/MAX CỦA CỬA SỔ SẢNH --------------------------------------- */

/* 98.css vẽ icon nút qua `mask-image` gắn với thuộc tính `data-minimize`/`data-maximize`/
   `data-close`. Ở đây markup KHÔNG đặt các thuộc tính đó (để tránh trùng với JS), nên phải
   khai báo lại — nếu không ba nút là ba ô trống. */

/* Thu nhỏ: gấp ruột cửa sổ, chỉ còn thanh tiêu đề. */
.desktop .window.folded .window-body { display: none; }
.desktop .window.folded { max-height: none; }

/* Phóng to: rộng gần kín khung nhìn (chừa lề để còn thấy nền desktop, đúng kiểu cửa sổ XP). */
.desktop .window.maximized { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }

/* ---- THANH ĐIỀU KHIỂN KHI ĐANG CHƠI ------------------------------------ */

/* Toàn bộ style của cụm này nằm ở khối "CỤM ĐIỀU KHIỂN TRONG TRẬN" phía trên (đầu file, cạnh
   `body.in-game`). KHÔNG khai báo lại ở đây: bản trước có hai khối cùng đặt `#ingameBar` nên
   khối dưới ghi đè `top/right: 0` trở lại thành `8px`, và mọi sửa ở khối trên gần như vô hiệu.
   Một chỗ duy nhất cho mỗi thành phần. */

/* Nút trên thanh này cũng theo kiểu XP nhưng nhỏ hơn (đang chơi, không nên choán màn hình). */
#ingameBar button {
  min-width: 0;
  padding: 2px 10px 3px;
  font: 12.5px/1.4 Tahoma, 'Segoe UI', sans-serif;
  color: #000;
  background: linear-gradient(180deg, #fff, #f0f0ea);
  border: 1px solid #003c74;
  border-radius: 4px;
  box-shadow: -1px -1px #e2ded4, 1px 1px #fbfaf8, inset -1px -2px 1px #d6d0c5;
  cursor: pointer;
}
#ingameBar button:hover:not(:disabled) { filter: brightness(1.06); }
#ingameBar button:disabled { opacity: 0.55; cursor: default; }

/* Nút "Menu" cũng có thể được gọi qua id ở nơi khác — giữ khai báo cũ cho chắc. */
#menuBtn[hidden] { display: none; }

/* ============================================================================
   COMPONENT DÙNG CHUNG CHO MỌI TRANG (không chỉ sảnh)
   ============================================================================

   File này giờ là SKIN XP DUY NHẤT của cả site: `login.html`, `index.html` (sảnh),
   `admin.html` và `ping.html` đều nạp `98.css` + file này. VÌ SAO: trước đây hai trang
   `login.html` và `ping.html` có CSS riêng kiểu tối/bo tròn, nên cùng một site mà đăng nhập
   một kiểu, sảnh một kiểu. Yêu cầu: "kiểu winxp native đi tất cả các chỗ".

   Nên mọi thứ ở dưới đây viết theo ngôn ngữ XP: viền lõm (inset), nền xám
   `--window-bg`, chữ Tahoma đen, không bo tròn, không đổ bóng mờ. */

/* Cửa sổ hẹp cho trang chỉ có một việc (đăng nhập, đo ping). */
.desktop .window.narrow { max-width: 420px; }

/* Ô đọc số kiểu bảng điều khiển: nền đen, chữ xanh mono — đúng chất công cụ XP.
   Dùng <b>/<i> thật trong markup để không phải ghép HTML ở JS. */
.xp-readout {
  border: 2px inset #dfdfdf;
  background: #000;
  color: #00c000;
  padding: 14px 12px;
  text-align: center;
  font: 12px/1.3 'Lucida Console', 'Courier New', monospace;
}
.xp-readout .n { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.xp-readout .n span { font-size: 14px; font-weight: 400; }
.xp-readout .c { margin-top: 6px; color: #00a000; }

/* Lưới ô phụ (dao động / tình trạng server) — viền lõm như fieldset XP. */
.xp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.xp-cell {
  border: 2px inset #dfdfdf;
  background: var(--window-bg);
  padding: 5px 8px;
  color: #000;
}
.xp-cell u { display: block; font-size: 11px; color: #4a5561; text-decoration: none; }
.xp-cell b { font-size: 14px; }

/* Thanh tiến trình dạng khối (không dùng <progress> vì cần nhịp chạy 8 lượt). */
.xp-prog {
  height: 16px;
  border: 2px inset #dfdfdf;
  background: var(--window-bg);
  margin-top: 8px;
  padding: 2px;
}
.xp-prog[hidden] { display: none; }
.xp-prog i { display: block; height: 100%; width: 0; background: #000080; transition: width 0.2s linear; }

/* Hộp thoại cảnh báo kiểu XP (thay cho banner bo tròn). */
.xp-banner {
  border: 2px inset #dfdfdf;
  background: #fff;
  color: #000;
  padding: 8px 10px;
  font-size: 12.5px;
  margin-top: 8px;
  min-height: 34px;
}
.xp-banner[data-kind='error'] { background: #ffe1e1; }
.xp-banner[data-kind='ok'] { background: #e1ffe1; }
.xp-banner[data-kind='warn'] { background: #fff4d1; }

/* Liên kết trong sảnh/khung — màu xanh liên kết XP, gạch chân khi hover. */
.window-body a.link { color: #003399; font-size: 12px; }
.window-body a.link:hover { text-decoration: underline; }

/* Nhãn nhỏ phía trên ô nhập (form đăng nhập): XP không dùng label nổi, dùng chữ thường. */
.window-body label.fld { display: block; margin: 10px 0 3px; font-size: 12.5px; color: #000; }
.window-body input[type='password'] {
  font: 13px/1.4 Tahoma, 'Segoe UI', sans-serif;
  padding: 3px 6px;
  color: #000;
  background: #fff;
  border: 1px solid #7f9db9;
  border-radius: 0;
  box-shadow: inset 1px 1px #a0a0a0;
  width: 100%;
}


/* ============================================================================
   LỆNH TỰ CHẠY KHI VÀO GAME (tab Cấu hình ở sảnh)
   ============================================================================
   Ba khối: danh sách người chơi tự thêm (#cmdList), bảng tra đầy đủ (#cmdCatalog), và nhóm gợi ý
   (#cmdGoiY). Dùng lại `.cmd-row` của menu trong trận để hai nơi trông cùng một hệ. */

/* Danh sách lệnh đã thêm: mỗi dòng có nút Xoá ở cuối nên cần chỗ cho nó. */
#cmdList .cmd-row code,
#cmdCatalog .cmd-row code {
  min-width: 150px;
  font-family: Consolas, 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Dòng trong danh sách người chơi: đánh số thứ tự để biết lệnh nào chạy trước — thứ tự CÓ ý
   nghĩa (lệnh sau ghi đè lệnh trước), nên phải nhìn ra được. */
#cmdList .cmd-row .stt {
  flex: 0 0 auto;
  min-width: 18px;
  font-size: 11.5px;
  color: #6b6b6b;
  text-align: right;
}
#cmdList .cmd-row .xoa { padding: 1px 7px 2px; font-size: 12px; }

/* Bảng tra: danh sách dài (hơn 1000 mục) nên PHẢI có trần chiều cao và tự cuộn. Không đặt trần
   thì khối này đẩy mọi thứ bên dưới ra khỏi màn hình — đúng lỗi đã gặp ở menu tabbed
   (`.window-body` trên 1200px trong khung 900px). */
#cmdCatalog {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #ccc8bb;
  background: #fff;
  padding: 3px 6px;
}
#cmdCatalog .cmd-row { padding: 2px 0; }
#cmdCatalog .cmd-row .desc { color: #4a5561; }
/* Mục bị chặn (lệnh nguy hiểm / không chạy được): KHÔNG cho bấm, và nói rõ lý do ngay trên dòng
   — người chơi cần biết vì sao mình không thêm được, thay vì tưởng nút hỏng. */
#cmdCatalog .cmd-row.blocked { opacity: 0.62; }
#cmdCatalog .cmd-row.blocked .desc { color: #8a2b2b; }

/* Ghi chú dưới nút Lưu lệnh: cùng hệ màu với `#settingsNote` để hai phần đọc giống nhau. */
#cmdNote { font-size: 12.5px; min-height: 17px; }
#cmdNote[data-kind='ok'] { color: #046a04; }
#cmdNote[data-kind='err'] { color: #a00; }
#cmdNote[data-kind='warn'] { color: #8a5a00; }

/* Nhóm gợi ý: mỗi nhóm một khối, tiêu đề nhỏ, các mục là nút bấm-là-thêm. */
#cmdGoiY { margin-top: 8px; }
#cmdGoiY .goiy-nhom { margin-top: 8px; }
#cmdGoiY .goiy-ten { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
#cmdGoiY .goiy-muc {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px dotted #e0ddd3;
}
#cmdGoiY .goiy-muc:last-child { border-bottom: none; }
#cmdGoiY .goiy-muc code {
  flex: 0 0 auto;
  min-width: 150px;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
}
#cmdGoiY .goiy-muc .desc { flex: 1; min-width: 0; font-size: 12px; color: #4a5561; line-height: 1.35; }
#cmdGoiY .goiy-muc button { padding: 1px 8px 2px; font-size: 12px; }

/* ============================================================================
   THAO TÁC NHANH CHO CẢ PHÒNG (tab "Phòng" trong menu in-game)
   ============================================================================
   Nút hành động nguy hiểm hơn nút thường (đổi đội hay restart cho MỌI NGƯỜI), nên tách khối
   riêng + viền trái để không bị bấm nhầm lẫn với danh sách phòng ngay trên nó. */
#escActionWrap {
  margin-top: 10px;
  padding-left: 9px;
  border-left: 3px solid #d8b44a;
}
#escActions { flex-wrap: wrap; gap: 6px; }
#escActions button { white-space: nowrap; }
#escActions button:disabled { opacity: 0.55; }
/* Thông báo kết quả: cùng hệ màu với `#status` để người chơi đọc quen mắt. */
#escActionNote.ok { color: #046a04; }
#escActionNote.err { color: #a00; }