:root { color-scheme: dark; }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background: #05060a; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .wrap {
    position: fixed; inset: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; text-align: left;
    scrollbar-width: none;
  }
  .wrap::-webkit-scrollbar { display: none; }
  .stage {
    position: relative;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    height: 100vh; height: 100dvh;
    width: calc(100vh * 1774 / 887);
    width: calc(100dvh * 1774 / 887);
    background: #000;
  }
  .stage img.map { display:block; width:100%; height:100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
  .char {
    position: absolute;
    /* Sprite nguồn: mỗi frame 120x120, hiển thị theo mốc 80x80 trên map 1774x887. */
    width: 4.5096%; aspect-ratio: 1/1;
    transform: translate(-50%, -92%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0% 0%;
    image-rendering: pixelated;
    cursor: pointer;
    transition: left 1.1s ease-in-out, top 1.1s ease-in-out;
    filter: drop-shadow(0 6px 4px rgba(0,0,0,.45));
    z-index: 5;
    touch-action: manipulation;
  }
  .speech-bubble {
    position:absolute; left:50%; bottom:calc(100% + 8px); z-index:7;
    width:max-content; max-width:190px; padding:7px 11px;
    transform:translateX(-50%); pointer-events:none;
    border:3px solid #191720; border-radius:6px;
    background:#fff8df; color:#211d25;
    box-shadow:4px 4px 0 rgba(0,0,0,.38);
    font-family:'VT323', monospace; font-size:15px; font-weight:600;
    line-height:1.05; white-space:nowrap; text-align:center;
  }
  .speech-bubble::before,
  .speech-bubble::after {
    content:''; position:absolute; left:50%; width:0; height:0; transform:translateX(-50%);
    border-left:8px solid transparent; border-right:8px solid transparent;
  }
  .speech-bubble::before { bottom:-11px; border-top:10px solid #191720; }
  .speech-bubble::after { bottom:-6px; border-left-width:5px; border-right-width:5px; border-top:7px solid #fff8df; }
  .speech-bubble.activity-bongro { left:26%; bottom:calc(100% + 5px); }
  .speech-bubble.activity-ngu { left:62%; bottom:calc(100% + 2px); }
  .menu {
    position:absolute; transform: translate(-50%, 0);
    background: rgba(18,18,24,.96); border: 1px solid #444; border-radius: 10px;
    padding: 6px; display:flex; flex-direction:column; gap: 4px; z-index: 10;
    box-shadow: 0 6px 18px rgba(0,0,0,.5); min-width: 140px; max-width: 220px;
  }
  .menu button {
    background:#2a2d38; color:#fff; border:1px solid #454955; border-radius:7px;
    padding: 9px 10px; font-size: 14px; cursor:pointer; text-align:left;
  }
  .menu button:hover { background:#3a3f4e; }
  .gear {
    position:fixed; top: 10px; right: 10px; z-index: 6;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,0,0,.5); color:#eee; border: none;
    font-size: 16px; cursor: pointer; display:flex; align-items:center; justify-content:center;
  }
  .gear:hover { background: rgba(0,0,0,.7); }
  .backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: none; align-items: center; justify-content: center; z-index: 20;
  }
  .backdrop.show { display: flex; }
  .panel {
    background: #181a22; border: 1px solid #3a3d4a; border-radius: 14px;
    padding: 16px; width: min(94vw, 420px); max-height: 86vh;
    color: #eee; box-shadow: 0 12px 40px rgba(0,0,0,.6);
    /* 2026-09-19: panel giờ là flex column — header (h2/panel-close) và footer
       (.panel-actions) đứng yên, chỉ .panel-body (nếu có) cuộn riêng khi nội dung vượt
       max-height. Modal nào không có .panel-body thì hành vi y hệt trước (không đổi). */
    display: flex; flex-direction: column; overflow: hidden;
  }
  /* Vùng nội dung cuộn riêng, kẹp giữa header và footer cố định của modal — xem index.html,
     áp dụng cho các modal có thể dài hơn màn hình (check-in/lịch trình/kho hình/ghi chú bí
     mật/lightbox). Modal ngắn (override) không cần bọc, không đổi hành vi. */
  .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .panel h2 { font-size: 15px; margin: 0 0 4px; color: #ffd27a; }
  .panel p.note { font-size: 11px; color: #999; margin: 0 0 12px; line-height: 1.4; }
  .seg {
    display:flex; align-items:center; gap: 6px; margin-bottom: 6px;
    background:#1f222c; border:1px solid #333644; border-radius:8px; padding:6px 8px;
  }
  .seg .range { font-size: 12px; color:#9aa; min-width: 74px; }
  .seg select {
    flex:1; background:#23262f; color:#fff; border:1px solid #454955; border-radius:6px;
    padding: 6px; font-size: 13px;
  }
  .seg .endsel {
    width: 78px; background:#23262f; color:#fff; border:1px solid #454955; border-radius:6px;
    padding: 6px; font-size: 12px;
  }
  .seg .del {
    background:#4a2a2a; color:#f88; border:1px solid #5a3a3a; border-radius:6px;
    padding: 6px 8px; font-size: 12px; cursor:pointer;
  }
  .seg .del[disabled] { opacity:.3; cursor:default; }
  .add-row {
    width: 100%; margin: 4px 0 12px; padding: 7px; border-radius: 8px;
    background:#20303a; border:1px dashed #3a5a66; color:#9cd; font-size:12px; cursor:pointer;
  }
  .panel-actions { display:flex; gap:8px; margin-top: 6px; }
  .panel-actions button {
    flex:1; padding: 9px; border-radius: 8px; border: 1px solid #454955;
    font-size: 13px; cursor: pointer;
  }
  .btn-save { background:#3d6b3f; color:#fff; }
  .btn-close { background:#2a2d38; color:#ddd; }

.login-overlay {
  position: fixed; inset: 0; background: rgba(10,10,14,.92); z-index: 50;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.login-overlay[hidden] { display:none; }
.login-box {
  width: 100%; max-width: 320px; background:#1b1d24; border:1px solid #333744;
  border-radius: 14px; padding: 22px 20px; color:#eee;
}
.login-box h2 { margin:0 0 4px; font-size:17px; }
.login-box p.note { color:#9aa0ad; font-size:12px; margin:0 0 16px; }
.login-box input {
  width:100%; box-sizing:border-box; margin-bottom:10px; padding:10px 12px;
  border-radius:8px; border:1px solid #454955; background:#23262f; color:#fff; font-size:14px;
}
.login-box button {
  width:100%; padding:10px; border-radius:8px; border:none; background:#3d6b3f;
  color:#fff; font-size:14px; cursor:pointer; margin-top:4px;
}
.login-box button[disabled] { opacity:.5; cursor:default; }
.login-err { color:#f88; font-size:12px; min-height:16px; margin-top:8px; }
.settings-menu {
  position:fixed; top:50px; right:10px; z-index:14;
  width:140px; padding:6px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14); background:rgba(18,18,24,.96);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.settings-menu[hidden] { display:none; }
.settings-menu button {
  display:block; width:100%; padding:9px 10px; border:0; border-radius:7px;
  background:transparent; color:#eee; font-size:13px; text-align:left; cursor:pointer;
}
.settings-menu button:hover { background:rgba(255,255,255,.09); }
.settings-menu button + button { margin-top:2px; color:#ff9b9b; }

.mini-map {
  /* relative (không phải static): vẫn là flex item bình thường trong .topbar-overlay,
     nhưng vẫn phải là containing block cho .mini-map-stage/.mini-map-label (position:absolute). */
  position: relative; z-index: 12;
  display: block; width: 88px; height: 59px; padding: 0; flex: none;
  overflow: hidden; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: #05060a; box-shadow: 0 0 24px rgba(0,0,0,.7);
  cursor: pointer; appearance: none;
}
.mini-map[hidden] { display: none; }
.mini-map-stage { position:absolute; display:block; pointer-events:none; }
.mini-map-image { display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.mini-char {
  position:absolute; display:block; width:80px; height:80px;
  transform:translate(-50%, -92%); background-repeat:no-repeat;
  image-rendering:pixelated; filter:drop-shadow(0 4px 3px rgba(0,0,0,.45)); z-index:2;
}
.mini-map-label {
  /* 1 dòng "Tên: Hoạt động" (thử 2 dòng ở vòng 3 rồi quay lại) — nhưng vẫn căn giữa theo
     chiều ngang (khác bản gốc canh trái), 2026-09-17. */
  position:absolute; left:50%; bottom:6px; z-index:3; transform:translateX(-50%);
  max-width:calc(100% - 12px); padding:3px 8px; border-radius:999px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center;
  background:rgba(0,0,0,.62); color:#fff; font-size:11px; line-height:1.2;
  box-shadow:0 2px 8px rgba(0,0,0,.3); pointer-events:none;
}

@media (min-width: 1024px) {
  .wrap { overflow-x:hidden; display:flex; justify-content:center; text-align:initial; }
  .stage { flex:0 0 auto; }
}

/* ============ PIXEL DARK UI ============ */
.gear {
  width:40px; height:40px; border:3px solid #6d6a98; border-radius:6px;
  background:#24213f; color:#fff3b0; font-family:'VT323', monospace;
  font-size:18px; box-shadow:4px 4px 0 rgba(0,0,0,.55);
}
.gear:hover { background:#332d59; border-color:#9690d3; }

.settings-menu,
.menu {
  border:3px solid #313545; border-radius:6px;
  background:#141720;
  box-shadow:6px 6px 0 rgba(0,0,0,.58);
  font-family:'VT323', monospace;
}
.settings-menu { top:58px; right:10px; width:150px; padding:6px; }
.settings-menu button,
.menu button {
  min-height:36px; border:2px solid transparent; border-radius:3px;
  background:#202431; color:#f4f1e7;
  font-family:'VT323', monospace; font-size:15px; font-weight:600;
}
.settings-menu button:hover,
.menu button:hover {
  background:#30364a; border-color:#555d79;
}
.settings-menu button + button { color:#ff8f92; }
.settings-menu .music-volume + button { color:#ff8f92; }
.settings-menu #musicToggleBtn { color:#bcefc1; }
.music-volume {
  display:grid; grid-template-columns:1fr auto; gap:4px 8px;
  margin:3px 0 5px; padding:8px 10px;
  border:2px solid #303649; border-radius:3px;
  background:#1b1f2a; color:#cbd1df;
  font-family:'VT323', monospace; font-size:13px;
}
.music-volume input {
  grid-column:1 / -1; width:100%; height:12px; margin:3px 0 0;
  accent-color:#70bd78; cursor:pointer;
}
.menu { gap:5px; padding:7px; }

.backdrop {
  background-color:rgba(4,6,10,.72);
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:4px 4px;
}
.panel {
  position:relative; width:min(94vw, 440px); padding:16px;
  border:3px solid #343949; border-radius:7px;
  background:#151820; color:#f2efe5;
  box-shadow:8px 8px 0 rgba(0,0,0,.58);
  font-family:'VT323', monospace;
}
.panel-close {
  position:absolute; top:11px; right:12px; z-index:2;
  width:28px; height:28px; padding:0; border:2px solid #454c60; border-radius:3px;
  background:#292e3b; color:#cfd4df;
  font-family:'VT323', monospace; font-size:15px; font-weight:700;
  cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.panel-close:hover { background:#3a4051; color:#fff; }
/* Mọi con trực tiếp của .panel (header h2/note, footer .panel-actions, status text...) mặc
   định KHÔNG co lại khi panel flex — chỉ riêng .panel-body ở giữa mới co giãn/cuộn được
   (override bên dưới, cùng độ ưu tiên selector nên override đúng theo thứ tự khai báo sau),
   2026-09-19. */
.panel > * { flex: none; }
.panel > .panel-body { flex: 1 1 auto; min-height: 0; }
.panel::before {
  content:''; position:absolute; inset:5px; z-index:-1; pointer-events:none;
  border:1px solid rgba(255,255,255,.035);
}
.panel h2 {
  margin:0 72px 13px 0; color:#ffd36b;
  font-family:'VT323', monospace; font-size:19px; font-weight:700;
  letter-spacing:.2px;
}
.panel p.note {
  margin:0 0 13px; color:#aeb3c0;
  font-family:'VT323', monospace; font-size:12px; line-height:1.25;
}
.seg {
  gap:6px; margin-bottom:7px; padding:7px 8px;
  border:2px solid #353b4d; border-radius:4px;
  background:#1d212c;
}
.schedule-seg {
  display:grid !important;
  grid-template-columns:74px 112px minmax(0, 1fr) 44px;
  align-items:center !important; gap:6px !important;
}
.schedule-seg .range { min-width:0; }
.schedule-seg .endsel { width:100%; min-width:0; }
.schedule-seg select:not(.endsel) { width:100%; min-width:0; }
.seg .range { color:#aeb5c4; font-family:'VT323', monospace; font-size:13px; }
.seg select,
.seg .endsel {
  min-height:34px; border:2px solid #41485d; border-radius:3px;
  background:#242936; color:#fff;
  font-family:'VT323', monospace; font-size:14px; font-weight:600;
  outline:none;
}
.seg select:hover,
.seg select:focus { border-color:#777fa2; background:#2a3040; }
.seg .del {
  min-height:34px; border:2px solid #774348; border-radius:3px;
  background:#512f34; color:#ff9699;
  font-family:'VT323', monospace; font-size:13px; font-weight:600;
  box-shadow:2px 2px 0 rgba(0,0,0,.32);
}
.seg .del:hover { background:#6a363d; color:#ffd0d1; }
/* Tóm tắt giờ kết thúc override, thay cho select hiện sẵn — mặc định ẩn select, bấm dòng này
   mới mở select ra để đổi giờ khác, 2026-09-17. */
.override-summary {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  margin-bottom:7px; padding:9px 10px;
  border:2px solid #353b4d; border-radius:4px;
  background:#1d212c; color:#eef0f6;
  font-family:'VT323', monospace; font-size:15px;
  cursor:pointer;
}
.override-summary[hidden] { display:none; }
#overrideSegRow[hidden] { display:none; }
.override-summary:hover { border-color:#777fa2; background:#242936; }
.override-summary b { color:#ffd36b; font-weight:700; }
.override-summary-edit { color:#8fe4ed; font-size:12px; text-decoration:underline; text-underline-offset:2px; }
.add-row {
  margin:5px 0 13px; min-height:36px;
  border:2px dashed #477783; border-radius:4px;
  background:#1c3038; color:#8fe4ed;
  font-family:'VT323', monospace; font-size:14px; font-weight:600;
}
.panel-actions .add-row { margin:0; width:auto; flex:1; border-style:solid; }
.add-row:hover { background:#24404a; border-color:#6aabb8; }
/* Ngăn CTA footer (Chọn lại/Đăng, Huỷ/Xác nhận, Thêm khung giờ/Lưu & áp dụng...) với nội
   dung phía trên bằng 1 đường kẻ mảnh — áp dụng chung mọi modal dùng .panel-actions, 2026-09-17. */
.panel-actions { gap:9px; margin-top:7px; padding-top:10px; border-top:1px solid #353b4d; }
.panel-actions button {
  min-height:39px; border:2px solid #454c60; border-radius:4px;
  font-family:'VT323', monospace; font-size:15px; font-weight:700;
  box-shadow:3px 3px 0 rgba(0,0,0,.38);
}
.btn-close { background:#292e3b; color:#d9dde8; }
.btn-close:hover { background:#343a4b; }
.btn-save { border-color:#4f8455 !important; background:#356c3c; color:#ecffeb; }
.btn-save:hover { background:#43824a; }
/* Modal confirm xoá ảnh — dùng chung cho cả nút xoá ở Kho hình lẫn lightbox, 2026-09-19. */
.delete-confirm-panel { width: min(90vw, 320px); }
.btn-danger { border-color:#774348 !important; background:#512f34 !important; color:#ff9699 !important; }
.btn-danger:hover { background:#6a363d !important; color:#ffd0d1 !important; }

.login-overlay {
  background-color:rgba(4,6,10,.9);
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:4px 4px;
}
.login-box {
  border:3px solid #343949; border-radius:7px; background:#151820;
  box-shadow:8px 8px 0 rgba(0,0,0,.58);
  font-family:'VT323', monospace;
}
.login-box h2 { color:#ffd36b; font-family:'VT323', monospace; font-size:20px; }
.login-box p.note { font-family:'VT323', monospace; font-size:13px; }
.login-box input {
  border:2px solid #41485d; border-radius:3px; background:#242936;
  font-family:'VT323', monospace; font-size:15px;
}
.login-box button {
  border:2px solid #4f8455; border-radius:4px; background:#356c3c;
  font-family:'VT323', monospace; font-size:16px; font-weight:700;
  box-shadow:3px 3px 0 rgba(0,0,0,.38);
}
.mini-map-label {
  bottom:4px; max-width:calc(100% - 8px);
  border:1.5px solid #3a3e4d; border-radius:3px; padding:2px 6px;
  background:#151820; color:#fff3b0;
  font-family:'VT323', monospace; font-size:10px; font-weight:700; line-height:1.2;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}

/* ============ CHECK-IN (Locket-style) ============ */
.topbar-overlay {
  position: fixed; left: 12px; top: 12px; z-index: 12;
  display: flex; align-items: flex-start; gap: 8px;
  max-width: calc(100vw - 24px);
}
.story-row {
  display: flex; gap: 6px; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  padding: 2px; margin-top: 0; max-width: calc(100vw - 84px - 40px);
  scrollbar-width: none;
}
.story-row::-webkit-scrollbar { display: none; }
.story-item { position: relative; width: 40px; height: 40px; flex: none; cursor: pointer; }
.story-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-photo {
  position: absolute; inset: 4px; border-radius: 50%; overflow: hidden;
  background: #1d212c center/cover no-repeat; border: 1px solid rgba(255,255,255,.12);
}
/* 2026-09-17: badge góc đổi từ chấm màu nam/nữ sang avatar mini (background-image set trong
   JS ở renderStoryRow/renderGallery) — chỉ còn khung tròn + viền ở CSS. */
.story-badge {
  position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #05060a; background: #1d212c center/cover no-repeat;
}
/* Badge reaction — góc ĐỐI DIỆN với story-badge (avatar) để không đè lên nhau, chỉ hiện khi
   check-in đó đã có reaction (set nội dung = emoji trong JS), 2026-09-18. */
.story-reaction-badge {
  position: absolute; left: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #05060a; background: #1d212c;
  font-size: 9px; line-height: 12px; text-align: center;
}
/* Chưa check-in trong 24h -> hiện avatar mặt tĩnh thay vì trống/chỉ chấm màu, không có ring
   đếm ngược (vì không có gì đang đếm) và không bấm mở lightbox được, 2026-09-17. */
.story-item-empty { cursor: default; }
.story-avatar { background-color: #05060a; }

.gallery-btn {
  position: fixed; top: 10px; right: 52px; z-index: 6;
  width:40px; height:40px; border:3px solid #6d6a98; border-radius:6px;
  background:#24213f; color:#fff3b0;
  box-shadow:4px 4px 0 rgba(0,0,0,.55); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.gallery-btn:hover { background:#332d59; border-color:#9690d3; }
.gallery-btn svg { width:17px; height:17px; }

.checkin-fab {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  border: 3px solid #191720; background: #ffd36b; color: #211d25;
  font-family: 'VT323', monospace; font-weight: 700; font-size: 14px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45); cursor: pointer;
}
.checkin-fab:hover { filter: brightness(1.07); }
.checkin-fab[hidden] { display: none; }
.checkin-fab svg { width: 16px; height: 16px; }

/* Mobile: gear + gallery + checkin gộp thành 1 thanh dưới cùng, đúng wireframe gốc
   (2 icon nhỏ bên trái + 1 nút rộng bên phải) — desktop khôi phục vị trí gốc trong
   @media(min-width:1024px) bên dưới, 2026-09-17. */
.gear {
  top: auto; right: auto; left: 10px; bottom: 10px;
}
.gallery-btn {
  top: auto; right: auto; left: 56px; bottom: 10px;
}
.checkin-fab {
  left: 102px; right: 10px; bottom: 10px; top: auto; transform: none;
  width: auto; height: 40px; padding: 0 14px; border-radius: 10px;
  justify-content: center;
}
/* Submenu Settings phải bám theo gear (giờ ở bottom-bar trên mobile), không còn cố định
   top-right nữa — mở lên phía trên nút gear. Desktop khôi phục lại vị trí cũ trong
   @media(min-width:1024px) bên dưới, 2026-09-17. */
.settings-menu {
  top: auto; right: auto; left: 10px; bottom: 60px;
}

.checkin-pick-row { display: flex; gap: 8px; margin: 5px 0 13px; }
.checkin-pick-row[hidden] { display: none; }
.checkin-pick-btn { flex: 1; min-height: 52px; margin: 0; }
/* Mobile: xếp dọc — "Chụp ảnh" full-width nằm trên, cao gấp đôi nút thường (52px -> 104px);
   "Chọn ảnh" chỉ còn dạng text link, bỏ hẳn border/background. Desktop khôi phục về 1 nút
   dashed-border bình thường (xem @media(min-width:1024px) bên dưới), 2026-09-17. */
.checkin-pick-row { flex-direction: column; }
#checkinCameraBtn { flex: none; width: 100%; min-height: 104px; }
#checkinLibraryBtn {
  flex: none; width: 100%; min-height: auto; margin: 2px 0 0; padding: 8px;
  border: none; border-radius: 0; background: transparent; color: #8fe4ed;
  text-decoration: underline; text-underline-offset: 2px; box-shadow: none;
}
#checkinLibraryBtn:hover { background: transparent; border-color: transparent; }

.checkin-zone-chip {
  display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px;
  background: #1d212c; border: 2px solid #353b4d; color: #ffd36b;
  font-family: 'VT323', monospace; font-size: 12px;
}
/* Preview vuông cố định (aspect-ratio 1 + object-fit:cover) thay vì giữ nguyên tỉ lệ ảnh gốc —
   khớp đúng với crop vuông center mà compressCheckinImage() sẽ áp dụng lúc Đăng (cùng là
   "lấy hình vuông giữa theo cạnh ngắn hơn"), để preview WYSIWYG với ảnh sẽ lưu, 2026-09-18. */
.checkin-preview {
  position: relative; margin-bottom: 10px; border-radius: 8px; overflow: hidden;
  border: 2px solid #353b4d; aspect-ratio: 1;
}
.checkin-preview[hidden] { display: none; }
.checkin-preview img { display: block; width: 100%; height: 100%; object-fit: cover; background: #05060a; }
.checkin-status { min-height: 16px; margin-top: 8px; font-family: 'VT323', monospace; font-size: 12px; color: #9fd; }
.checkin-status.err { color: #ff9699; }

/* Caption kiểu Locket: đè thẳng lên góc dưới ảnh preview (không tách ô riêng bên dưới nữa),
   nền gradient tối mờ dần lên trên để chữ trắng luôn đọc được trên mọi ảnh nền sáng, 2026-09-17. */
.checkin-caption-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  padding: 22px 10px 8px; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.checkin-caption-wrap[hidden] { display: none; }
#checkinCaptionInput {
  display: block; width: 100%; resize: none; box-sizing: border-box; padding: 0;
  border: none; background: transparent; color: #fff;
  font-family: 'VT323', monospace; font-size: 16px; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
#checkinCaptionInput:focus { outline: none; }
#checkinCaptionInput::placeholder { color: rgba(255,255,255,.6); }
.checkin-caption-count {
  display: block; margin-top: 2px; text-align: right;
  font-family: 'VT323', monospace; font-size: 11px; color: rgba(255,255,255,.65);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}

.lightbox-panel { padding: 14px; }
.lightbox-photo { position: relative; border-radius: 8px; overflow: hidden; border: 2px solid #353b4d; margin-bottom: 10px; background: #05060a; }
.lightbox-photo img { display: block; width: 100%; max-height: 50vh; object-fit: contain; margin: 0 auto; }
/* Khối overlay chung đè lên góc dưới ảnh — gộp caption + dòng reaction vào cùng 1 nền gradient,
   xếp dọc theo thứ tự (caption trước, reaction sau), 2026-09-18. */
.lightbox-overlay-text {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  padding: 24px 10px 10px; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.lightbox-caption {
  margin: 0; font-family: 'VT323', monospace; font-size: 15px; line-height: 1.4; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  white-space: pre-wrap; word-break: break-word;
}
.lightbox-caption[hidden] { display: none; }
/* Dòng "Tên đã <emoji>" — đứng dưới caption trong cùng khối overlay, nhạt hơn caption 1 chút
   (màu vàng nhạt) để phân biệt đây là phản hồi của người kia chứ không phải nội dung gốc. */
.lightbox-reaction-text {
  margin: 3px 0 0; font-family: 'VT323', monospace; font-size: 14px; color: #ffd36b;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.lightbox-reaction-text[hidden] { display: none; }
.lightbox-meta { display: flex; align-items: center; gap: 10px; }
.lightbox-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: #1d212c center/cover no-repeat; /* ảnh set trong JS (openLightbox), 2026-09-17 */
}
.lightbox-text { font-family: 'VT323', monospace; font-size: 12px; color: #cbd1df; line-height: 1.5; flex: 1 1 auto; min-width: 0; }
.lightbox-text b { display: block; font-size: 14px; color: #fff3b0; }
.lightbox-countdown { margin-top: 2px; color: #8fe4ed; font-size: 11px; }
/* Nút xoá ảnh trong lightbox — chỉ hiện khi đang xem ảnh CỦA CHÍNH MÌNH (ngược điều kiện với
   .lightbox-reactions, xem openLightbox() trong app.js), đứng cuối hàng meta, 2026-09-19. */
.lightbox-delete-btn {
  flex: none; width: 30px; height: 30px; padding: 0; border: 2px solid #353b4d; border-radius: 8px;
  background: #1d212c; color: #ff9699; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-delete-btn:hover { background: #2c2226; border-color: #5a3a3a; color: #ffd0d1; }
.lightbox-delete-btn[hidden] { display: none; }

/* Hàng bấm reaction — hàng cuối cùng trong modal, chỉ hiện khi xem check-in của người kia. */
.lightbox-reactions {
  display: flex; justify-content: center; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #353b4d;
}
.lightbox-reactions[hidden] { display: none; }
.reaction-btn {
  min-width: 40px; min-height: 40px; border: 2px solid #353b4d; border-radius: 8px;
  background: #1d212c; font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.reaction-btn:hover { border-color: #777fa2; background: #242936; }
.reaction-btn.active { border-color: #ffd36b; background: #3a3320; box-shadow: 0 0 0 1px #ffd36b inset; }
.reaction-btn:disabled { opacity: .55; cursor: default; }

/* Kho hình giờ hiện TẤT CẢ ảnh (không giới hạn 24h nữa), group theo ngày, cuộn để tải thêm —
   .gallery-list là container chung, cuộn theo .panel cha (đã có overflow-y:auto sẵn), mỗi ngày
   là 1 header + 1 .photo-grid riêng, 2026-09-18. */
.gallery-list { display: flex; flex-direction: column; gap: 4px; }
.gallery-date-header {
  margin: 10px 0 2px; font-family: 'VT323', monospace; font-size: 13px; color: #8fe4ed;
}
.gallery-date-header:first-child { margin-top: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.grid-cell {
  position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  border: 2px solid #353b4d; cursor: pointer; background: #05060a;
}
.grid-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 2026-09-17: badge góc đổi từ chấm màu sang avatar mini, giống .story-badge ở trên. */
.grid-badge {
  position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #151820; background: #1d212c center/cover no-repeat;
}
/* Badge reaction trong Kho hình — góc đối diện grid-badge, chỉ hiện nếu ảnh đó có reaction. */
.grid-reaction-badge {
  position: absolute; left: 3px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #151820; background: #1d212c;
  font-size: 10px; line-height: 13px; text-align: center;
}
/* Nút xoá ảnh — chỉ gắn vào cell của CHÍNH MÌNH (xem renderGallery() trong app.js), góc trên
   phải, tách biệt hẳn 2 badge góc dưới. Chặn bubbling để không mở lightbox khi bấm, 2026-09-19. */
.grid-delete-btn {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 20px; height: 20px; padding: 0; border: 2px solid #151820; border-radius: 50%;
  background: rgba(20,15,17,.82); color: #ff9699; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.grid-delete-btn:hover { background: rgba(90,40,45,.92); color: #ffd0d1; }

/* ============ GHI CHÚ BÍ MẬT (notes-*) — 2026-09-18 ============ */
.notes-panel { padding: 14px; }
/* Khung character full-body — giống ô "Equipment" kiểu game inventory, character đứng giữa.
   Cao hơn bản đầu (170->240px) theo yêu cầu "nhân vật to ra", 2026-09-19. position:relative +
   overflow:hidden để làm sân chơi cho badge nổi bay lượn bên trong (xem .notes-float-badge). */
.notes-character-slot {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 6; height: auto; margin-bottom: 10px; border-radius: 8px;
  border: 2px solid #353b4d; background: #1d212c;
  overflow: hidden;
}
.notes-character-slot img { max-height: 100%; max-width: 100%; object-fit: contain; }
/* Badge nổi trong khung character — tối đa 5, mỗi cái là 1 GHI CHÚ (icon category + full nội
   dung), dạng pill hug-content (width tự co theo text), bay kiểu "DVD bounce" (JS drive vị trí
   qua transform, xem setupNotesBadges/stepNotesBadges trong app.js). Thuần trang trí, không bắt
   click (pointer-events:none). 2026-09-19 v2: đổi từ hình tròn chỉ icon -> pill icon + text. */
.notes-float-badge {
  position: absolute; top: 0; left: 0;
  border-radius: 999px; border: 2px solid #151820; background: rgba(29,33,44,.9);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 4px 9px; font-size: 12px; line-height: 1.2; pointer-events: none; will-change: transform;
}
.notes-float-badge-icon { font-size: 14px; line-height: 1; flex: none; }
.notes-float-badge-text {
  font-family: 'VT323', monospace; font-size: 13px; color: #eef0f6;
}
/* Lưới 10 ô item-slot, mỗi ô = 1 category — 5 ô/dòng (2 dòng đầy đủ 10 category), 2026-09-19. */
.notes-category-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
}
.notes-slot {
  position: relative; aspect-ratio: 1; border-radius: 8px;
  border: 2px solid #353b4d; background: #1d212c; color: #eef0f6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 3px; cursor: pointer;
}
.notes-slot:hover { border-color: #777fa2; background: #242936; }
.notes-slot-icon { font-size: 17px; line-height: 1; }
.notes-slot-label {
  font-family: 'VT323', monospace; font-size: 9px; line-height: 1.1; text-align: center; color: #cbd1df;
}
.notes-slot-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; border: 2px solid #151820; background: #ffd36b; color: #151820;
  font-family: 'VT323', monospace; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Màn chi tiết 1 category */
.notes-back-btn {
  margin-bottom: 8px; padding: 0; border: none; background: transparent; color: #8fe4ed;
  font-family: 'VT323', monospace; font-size: 13px; cursor: pointer;
}
.notes-back-btn:hover { color: #b3eef4; }
.notes-detail-title {
  margin: 0 0 8px; font-family: 'VT323', monospace; font-size: 17px; color: #fff3b0;
}
/* 2026-09-19: bỏ max-height:42vh/overflow-y:auto riêng (dư từ vòng 10, trước khi .panel-body
   trở thành vùng cuộn chung cho mọi modal ở vòng 13) — giờ chỉ .panel-body cuộn, tránh lồng 2
   lớp scroll trong cùng 1 modal. */
.notes-detail-list { display: flex; flex-direction: column; gap: 6px; }
.notes-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 2px solid #353b4d; border-radius: 6px; background: #1d212c;
}
.notes-item-text {
  flex: 1; min-width: 0; font-family: 'VT323', monospace; font-size: 15px; color: #eef0f6;
  line-height: 1.35; word-break: break-word; outline: none;
}
.notes-item-text:focus { color: #fff; }
.notes-item-del {
  flex: none; width: 22px; height: 22px; border: none; border-radius: 50%;
  background: #512f34; color: #ff9699; font-size: 14px; line-height: 1; cursor: pointer;
}
.notes-item-del:hover { background: #6a363d; color: #ffd0d1; }
.notes-add-row { display: flex; gap: 6px; margin-top: 8px; }
#notesAddInput {
  flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; box-sizing: border-box;
  border: 2px solid #41485d; border-radius: 6px; background: #242936; color: #fff;
  font-family: 'VT323', monospace; font-size: 15px;
}
#notesAddInput:focus { outline: none; border-color: #777fa2; }
.notes-add-btn {
  flex: none; width: 36px; height: 36px; border: 2px solid #4f8455; border-radius: 6px;
  background: #356c3c; color: #ecffeb; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
}
.notes-add-btn:hover { background: #43824a; }

@media (min-width: 1024px) {
  /* Desktop: mini-map giữ nguyên, story xếp dọc thành cột nhỏ hơn hẳn mini-map (~52px so với 84px) */
  .topbar-overlay { flex-direction: column; }
  .story-row {
    flex-direction: column; max-width: none; max-height: min(52vh, 360px);
    overflow-y: auto; overflow-x: hidden;
  }
  .story-item { width: 52px; height: 52px; margin: 0 auto; }

  /* Desktop: mini-map to hơn hẳn mobile (160x107 so với 88x59), vẫn tỉ lệ 3:2, 2026-09-17. */
  .mini-map { width: 160px; height: 107px; }

  /* Desktop: khôi phục gear/gallery góc trên-phải và checkin-fab pill giữa dưới,
     như trước khi gộp thanh dưới cho mobile ở trên. */
  .gear { top: 10px; right: 10px; left: auto; bottom: auto; }
  .gallery-btn { top: 10px; right: 52px; left: auto; bottom: auto; }
  .settings-menu { top: 58px; right: 10px; left: auto; bottom: auto; }
  .checkin-fab {
    left: 50%; right: auto; bottom: 14px; top: auto; transform: translateX(-50%);
    width: auto; height: auto; padding: 10px 18px; border-radius: 999px;
    justify-content: flex-start;
  }
  /* Desktop chỉ hiện nút thư viện (không tách camera/library như mobile), khôi phục lại
     đúng style dashed-button cũ (xem .add-row/.checkin-pick-btn) thay vì dạng text-only. */
  #checkinCameraBtn { display: none; }
  .checkin-pick-row { flex-direction: row; }
  #checkinLibraryBtn {
    flex: 1; width: auto; min-height: 52px; margin: 0; padding: 7px;
    border: 2px dashed #477783; border-radius: 4px; background: #1c3038; color: #8fe4ed;
    text-decoration: none; box-shadow: none;
  }
  #checkinLibraryBtn:hover { background: #24404a; border-color: #6aabb8; }
}

/* ---------- Map debugger (chỉ hiện khi ?debug=1) ---------- */
.dbg-layer { position:absolute; inset:0; z-index:20; }
.dbg-edges { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.dbg-edges line { stroke:#6de3ff; stroke-width:3; stroke-opacity:.75; }
.dbg-node {
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border:2px solid #0b0d12; border-radius:50%; background:#6de3ff;
  cursor:grab; touch-action:none;
}
.dbg-node.is-zone { width:18px; height:18px; margin:-9px 0 0 -9px; background:#ffd27a; border-radius:3px; }
.dbg-node.is-selected { outline:2px solid #fff; outline-offset:2px; }
.dbg-node.is-orphan { background:#ff6b6b; }
.dbg-node:active { cursor:grabbing; }
.dbg-label {
  position:absolute; left:50%; top:-18px; transform:translateX(-50%);
  font:600 10px/1 'VT323', monospace; color:#fff;
  background:rgba(8,10,16,.82); padding:2px 4px; border-radius:3px; white-space:nowrap;
}
.dbg-panel {
  position:fixed; top:10px; left:10px; z-index:40; width:250px;
  background:rgba(12,14,20,.94); border:1px solid #2f3550; border-radius:8px;
  padding:10px; color:#dde3f0; font:12px/1.45 -apple-system, system-ui, sans-serif;
}
.dbg-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dbg-head b { color:#ffd27a; }
.dbg-hint { color:#8d95a8; font-size:11px; margin:6px 0 8px; }
.dbg-list { max-height:200px; overflow:auto; border:1px solid #242a3d; border-radius:5px; }
.dbg-row {
  display:flex; justify-content:space-between; gap:8px; padding:4px 7px; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.dbg-row:nth-child(odd) { background:rgba(255,255,255,.03); }
.dbg-row.is-selected { background:#2b3556; }
.dbg-row span { color:#8d95a8; }
.dbg-route { display:flex; gap:4px; margin-top:8px; }
.dbg-route select { flex:1; min-width:0; }
.dbg-panel select, .dbg-panel button {
  background:#1b2033; color:#dde3f0; border:1px solid #333b58;
  border-radius:5px; padding:4px 7px; font-size:11px; cursor:pointer;
}
.dbg-panel button:hover { background:#252c45; }
.dbg-check { display:flex; align-items:center; gap:6px; margin-top:8px; color:#8d95a8; font-size:11px; }
.dbg-actions { display:flex; gap:6px; margin-top:8px; }
.dbg-actions button { flex:1; }
.dbg-copy { background:#2f4f36 !important; border-color:#3f6a48 !important; }
.dbg-status { margin-top:8px; min-height:15px; color:#9fe8b0; font-size:11px; word-break:break-word; }

/* ============ PET "Bún khè" (2026-09-25) ============ */
.pet {
  position:absolute; width:4.5096%; aspect-ratio:1/1; /* cùng mốc 120px/frame như nhân vật */
  transform:translate(-50%, -92%);
  cursor:pointer; z-index:5; touch-action:manipulation;
}
.pet[hidden] { display:none; }
.pet-sprite {
  width:100%; height:100%;
  background-repeat:no-repeat; background-size:400% 100%; background-position:0% 0%;
  image-rendering:pixelated;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.45));
}
/* Chó cao ~1/2 người: đầu chó ở ~y=67/120 khung -> bubble đặt ngay trên đầu chó, thấp hơn bubble người, không đè nhau. */
.pet-bubble { font-size:13px; padding:5px 9px; bottom:calc(46% + 4px); }
/* Tạm ẩn bubble pet (che Nobita), 2026-09-25 — code vẫn cập nhật text, xoá dòng này là hiện lại. */
.pet-bubble { display:none; }
.pet-menu { min-width:200px; }
.pet-menu-head { display:flex; flex-direction:column; gap:1px; padding:2px 4px 4px; color:#ffd36b; font-size:17px; }
.pet-menu-head span { color:#aeb3c0; font-size:13px; }
.pet-stats { display:flex; flex-direction:column; gap:4px; padding:6px 6px 8px; margin-bottom:2px; border-bottom:2px solid #262b39; }
.pet-stat { display:grid; grid-template-columns:34px 1fr 24px; align-items:center; gap:6px; color:#cbd1df; font-size:13px; }
.pet-stat b { text-align:right; font-weight:600; }
.pet-stat-bar { height:8px; border:2px solid #353b4d; border-radius:2px; background:#1b1f2a; overflow:hidden; }
.pet-stat-bar i { display:block; height:100%; background:#70bd78; }
.pet-stat.is-good .pet-stat-bar i { background:#70bd78; }
.pet-stat.is-mid .pet-stat-bar i { background:#f2c14e; }
.pet-stat.is-low .pet-stat-bar i { background:#ff6b6b; }
.pet-stat.is-low b { color:#ff8f92; }
.pet-menu button.is-active { border-color:#ffd36b; }
.pet-menu button:disabled { opacity:.4; cursor:default; }
.pet-name-input {
  width:100%; margin-bottom:12px; padding:9px 10px;
  border:2px solid #353b4d; border-radius:4px; background:#1d212c; color:#f2efe5;
  font-family:'VT323', monospace; font-size:18px;
}
.dbg-node.is-pet { background:#ff9fe0; border-radius:50% 50% 3px 3px; }

/* Cách nuôi Pet (2026-09-25) */
.pet-guide .panel-body { overflow-y:auto; }
.pet-guide h3 { margin:12px 0 6px; color:#ffd36b; font-size:16px; font-weight:700; }
.pet-guide h3:first-child { margin-top:0; }
.pet-guide p { margin:0 0 8px; color:#cbd1df; font-size:14px; line-height:1.3; }
.pet-guide-table { width:100%; border-collapse:collapse; margin:0 0 8px; font-size:14px; color:#f2efe5; }
.pet-guide-table th, .pet-guide-table td { padding:6px 8px; border:2px solid #2a2f3e; text-align:left; vertical-align:middle; }
.pet-guide-table th { background:#1d212c; color:#aeb3c0; font-weight:600; }
.pet-guide-count { text-align:center !important; font-weight:700; color:#bcefc1; white-space:nowrap; }
.pet-guide-count.is-full { color:#6b7080; }
.settings-menu #petGuideMenuBtn { color:#f4f1e7; } /* tránh rule "button + button" tô đỏ (dành cho nút Thoát) */
.pet-guide-table td:nth-child(2) { white-space:nowrap; } /* "Sạch +5" không bị gãy dòng trên mobile */

/* Vùng bấm pet ôm sát thân chó (vòng 23): cả khung .pet không nhận click, chỉ .pet-hit nhận. */
.pet { pointer-events:none; }
.pet-hit { position:absolute; left:30%; width:40%; top:46%; bottom:6%; pointer-events:auto; cursor:pointer; }
/* Ô hình pet đang chạy animation ở đầu menu (vòng 23) */
.pet-menu-preview {
  position:relative; height:110px; margin:0 0 6px; overflow:hidden;
  border:2px solid #262b39; border-radius:4px; background:#0d1017;
}
.pet-menu-preview i {
  position:absolute; left:50%; width:180px; height:180px; /* top + margin-left do JS căn theo tâm con chó */
  background-repeat:no-repeat; image-rendering:pixelated;
}

/* Tên + trạng thái đè góc trên-trái ô hình (vòng 24) */
.pet-menu-preview { height:136px; }
.pet-menu-preview .pet-menu-head {
  position:absolute; top:6px; left:8px; right:8px; z-index:1; padding:0;
  text-shadow:0 1px 0 #000, 0 0 4px #000; pointer-events:none;
}

/* Thời tiết + ngày/đêm (js/weather.js, 2026-09-25): canvas 1/3 độ phân giải phóng pixelated.
   shade dưới nhân vật (z4), fx + chớp sét trên nhân vật (z6), đều không nhận click. */
.wx-canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.wx-shade { z-index:4; }
.wx-fx { z-index:6; }
.wx-flash { position:absolute; inset:0; z-index:6; background:#fff; opacity:0; pointer-events:none; }
.dbg-node.is-lamp { width:10px; height:10px; margin:-5px 0 0 -5px; background:#ffe45e; border-radius:2px; }
.settings-menu #nightToggleBtn { color:#bcefc1; } /* tránh rule ".music-volume + button" tô đỏ (dành cho Thoát) */
.settings-menu #nightToggleBtn.is-off { color:#aeb3c0; }

/* Game hub + Battleship. The board keeps the warm paper/red-grid look of the reference. */
.game-btn {
  position:fixed; z-index:6; left:102px; bottom:10px;
  width:40px; height:40px; border:3px solid #6d6a98; border-radius:6px;
  background:#24213f; color:#fff3b0; box-shadow:4px 4px 0 rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.game-btn:hover { background:#332d59; border-color:#9690d3; }
.game-btn[hidden], .game-alert[hidden] { display:none; }
.game-btn svg { width:20px; height:20px; }
.game-alert {
  position:absolute; right:-5px; top:-5px; width:12px; height:12px; border-radius:50%;
  border:2px solid #151820; background:#ff7869; box-shadow:0 0 9px #ff7869;
}
.checkin-fab { left:148px; }
@media (min-width:1024px) {
  .game-btn { left:auto; right:94px; top:10px; bottom:auto; }
  .checkin-fab { left:50%; }
}
/* ===== Trò chơi: giao diện pixel art (2026-09-26) =====
   Mọi thứ trong bảng Trò chơi dùng khung pixel: viền cứng, góc bậc thang, bóng đổ không mờ,
   font VT323 và sprite pixel (assets/games/battleship/*.svg, sinh bằng
   test/generate_battleship_pixel_art.cjs). */
/* Danh sách trò chơi dùng modal chung của app (như modal pet, kho hình); chỉ khi vào một game
   (.is-battle) panel mới đổi sang khung pixel toàn màn hình. */
.game-panel {
  --gx-ink:#0a1420; --gx-deep:#0f2436; --gx-panel:#15314a; --gx-plate:#1c4262; --gx-edge:#3b7bab;
  --gx-light:#8fd0f2; --gx-gold:#ffd36b; --gx-text:#e8f2f6; --gx-muted:#9fb9c9;
  width:min(96vw, 570px); max-height:min(94dvh, 850px);
}
.game-panel .panel-body { scrollbar-width:thin; }
.game-header { display:flex; align-items:center; gap:12px; flex:none; }
.game-header h2 { margin:0; flex:1; min-width:0; }
.game-header .panel-close { position:static; flex:none; }
.game-header .game-back { margin:0; flex:none; width:34px; height:34px; font-size:28px; line-height:1; }
.game-header .game-back[hidden] { display:none; }
.game-back { padding:0; border:0; background:none; color:#91e0e8; font:inherit; cursor:pointer; }
.game-back:hover { color:#c6faff; }

.game-panel.is-battle {
  width:100vw; height:100dvh; max-width:none; max-height:none; display:flex; flex-direction:column;
  border:3px solid var(--gx-ink); border-radius:0; color:var(--gx-text); padding:18px; font-size:18px; image-rendering:pixelated;
  box-shadow:inset 0 0 0 3px var(--gx-edge), inset 0 0 0 6px var(--gx-ink);
  background:var(--gx-deep) repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px);
}
.game-panel.is-battle::before { display:none; }
.game-panel.is-battle img { image-rendering:pixelated; }
.game-panel.is-battle .panel-body { overflow:auto; scrollbar-color:var(--gx-edge) var(--gx-ink); }
.game-panel.is-battle .game-header {
  gap:10px; margin:-4px -4px 12px; padding:6px 8px;
  background:var(--gx-panel); border:3px solid var(--gx-ink); box-shadow:inset 0 -3px 0 rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.08);
}
.game-panel.is-battle .game-header h2 { color:var(--gx-gold); font-size:26px; letter-spacing:1px;
  text-transform:uppercase; text-shadow:3px 3px 0 var(--gx-ink); }
.game-panel.is-battle .game-header .panel-close, .game-panel.is-battle .game-header .game-back {
  width:34px; height:34px; margin:0; padding:0; border:3px solid var(--gx-ink); border-radius:0;
  background:var(--gx-plate); color:var(--gx-text); font:inherit; font-size:24px; line-height:1; cursor:pointer;
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.15), inset -3px -3px 0 rgba(0,0,0,.35);
}
.game-panel.is-battle .game-header .panel-close:hover, .game-panel.is-battle .game-header .game-back:hover { background:var(--gx-edge); }
.game-panel.is-battle .game-header .panel-close:active, .game-panel.is-battle .game-header .game-back:active {
  box-shadow:inset -3px -3px 0 rgba(255,255,255,.15), inset 3px 3px 0 rgba(0,0,0,.35); }

/* ---- nút dùng chung ---- */
.bs-primary, .bs-subtle, .bs-toolbar button, .bs-sound {
  min-height:40px; padding:4px 14px; border:3px solid var(--gx-ink); border-radius:0;
  font:inherit; font-size:20px; letter-spacing:.5px; cursor:pointer; color:var(--gx-text); background:var(--gx-plate);
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.18), inset -3px -3px 0 rgba(0,0,0,.35), 3px 3px 0 var(--gx-ink);
}
.bs-primary { background:#e0a336; color:#231a08; text-transform:uppercase; }
.bs-primary:hover:not(:disabled) { background:var(--gx-gold); }
.bs-subtle:hover, .bs-toolbar button:hover, .bs-sound:hover { background:var(--gx-edge); }
.bs-primary:active:not(:disabled), .bs-subtle:active, .bs-toolbar button:active, .bs-sound:active {
  transform:translate(3px, 3px); box-shadow:inset -3px -3px 0 rgba(255,255,255,.18), inset 3px 3px 0 rgba(0,0,0,.35);
}
.bs-primary:disabled { opacity:.45; cursor:default; }
.bs-wide { width:100%; }
.bs-actions { display:flex; gap:10px; margin:14px 0 4px; }
.bs-actions > button { flex:1; }
.bs-sound { display:block; min-height:32px; margin:14px auto 0; font-size:17px; }

/* ---- danh sách trò chơi (modal chung) ---- */
.game-intro, .game-footnote { color:#cbd1df; font-size:15px; line-height:1.3; margin:0 0 12px; }
.bs-message, .bs-hint { color:var(--gx-muted); font-size:19px; line-height:1.15; margin:0 0 12px; }
.game-footnote { margin:12px 0 0; color:#ffd36b; }
.game-catalog { display:grid; gap:10px; }
.game-card {
  width:100%; display:flex; align-items:center; gap:12px; padding:12px;
  border:2px solid #4b6070; border-radius:7px; background:#1c2933; color:#eef3ee;
  font:inherit; text-align:left; cursor:pointer;
}
.game-card:hover { border-color:#8db4c1; background:#263743; }
.game-card img { width:85px; height:43px; object-fit:contain; flex:none; image-rendering:pixelated; }
.game-card span:not(.game-soon-icon) { flex:1; min-width:0; }
.game-card b, .game-card small { display:block; }
.game-card b { color:#ffd36b; font-size:21px; }
.game-card small { color:#b9c4cb; font-size:13px; line-height:1.15; }
.game-card strong { color:#a7e8e5; font-size:14px; white-space:nowrap; }
.game-card .caro-symbol { font-size:26px; letter-spacing:2px; text-shadow:none; }
.game-soon-icon { width:85px; flex:none; text-align:center; font-size:30px; color:#95aab5; white-space:nowrap; }
.game-error { margin:10px 0 0; color:#ff9b9b; font-size:14px; line-height:1.2; }
.game-panel.is-battle .game-error { color:#ff8a7a; font-size:18px; line-height:1.1; }

/* ---- màn mời / chờ ---- */
.bs-cover { text-align:center; padding:12px 8px 18px; }
.bs-cover img { display:block; width:min(100%, 320px); height:90px; object-fit:contain; margin:auto; filter:drop-shadow(4px 4px 0 var(--gx-ink)); }
.bs-cover h3 { margin:6px 0; color:var(--gx-gold); font-size:32px; font-weight:400; text-shadow:3px 3px 0 var(--gx-ink); }
.bs-cover p { margin:0 auto; max-width:400px; font-size:20px; line-height:1.1; color:var(--gx-muted); }
.bs-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; }
.bs-placement-tools { display:flex; gap:8px; }
.bs-toolbar .bs-placement-tools button { flex:1; min-width:0; padding:6px 8px; font-size:16px; }
.bs-toolbar button { min-height:34px; font-size:18px; white-space:nowrap; flex:none; }
.bs-toolbar span { color:var(--gx-muted); font-size:17px; text-align:right; }
.bs-hint { margin:10px 0 0; text-align:center; }
.bs-message strong { font-weight:700; }

/* ---- HUD: hai tấm thẻ người chơi + đèn lượt ở giữa ---- */
.bs-hud { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; max-width:1100px; margin:0 auto 10px; }
.bs-plate {
  display:flex; gap:10px; align-items:center; min-width:0; padding:8px;
  border:3px solid var(--gx-ink); background:var(--gx-panel);
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.08), inset -3px -3px 0 rgba(0,0,0,.3), 4px 4px 0 var(--gx-ink);
}
.bs-plate.is-turn { background:var(--gx-plate); box-shadow:inset 0 0 0 3px var(--bs-line), 4px 4px 0 var(--gx-ink); }
.bs-plate:last-child { flex-direction:row-reverse; text-align:right; }
.bs-avatar { width:58px; height:58px; flex:none; border:3px solid var(--gx-ink); background:#0b1a28; object-fit:cover; }
.bs-plate.is-turn .bs-avatar { animation:bs-blink-border .8s steps(2) infinite; }
@keyframes bs-blink-border { 50% { border-color:var(--bs-line); } }
.bs-plate-info { min-width:0; }
.bs-plate strong { display:block; font-size:24px; font-weight:400; line-height:1; text-shadow:2px 2px 0 var(--gx-ink); }
.bs-plate small { display:block; color:var(--gx-muted); font-size:15px; line-height:1.1; }
.bs-fleet { display:flex; flex-wrap:wrap; gap:3px 6px; margin:4px 0 0; padding:0; list-style:none; }
.bs-plate:last-child .bs-fleet { justify-content:flex-end; }
.bs-fleet li { position:relative; height:12px; }
.bs-fleet li img { display:block; height:12px; }
.bs-fleet li.is-sunk img { filter:grayscale(1) brightness(.45); }
.bs-fleet li.is-sunk::after {
  content:''; position:absolute; left:-2px; right:-2px; top:4px; height:4px; background:#e2452a; box-shadow:0 0 0 1px var(--gx-ink);
}
.bs-hud-center {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:6px 10px;
  border:3px solid var(--gx-ink); background:#07111b; box-shadow:inset 0 0 0 3px #1a2f44, 4px 4px 0 var(--gx-ink); text-align:center;
}
.bs-turn { color:var(--gx-muted); font-size:17px; line-height:1; }
.bs-turn strong { display:block; margin-top:2px; font-size:24px; font-weight:400; }
.bs-turn.is-mine strong { animation:bs-blink 1s steps(2) infinite; }
@keyframes bs-blink { 50% { opacity:.35; } }
.bs-shot-count { padding:0 8px; border:3px solid var(--gx-ink); background:#21130b; color:#ff9d3b; font-size:16px; }
.bs-shot-count b { font-weight:400; font-size:22px; color:#ffcf7a; letter-spacing:2px; }
.bs-result { color:var(--gx-gold); font-size:26px; line-height:1; text-shadow:2px 2px 0 var(--gx-ink); }
.bs-hud-center .bs-primary { min-height:34px; font-size:18px; }
.bs-team-text-red { color:#ff7d6b; }
.bs-team-text-blue { color:#7cc6ff; }

/* ---- hai vùng biển ---- */
/* Bàn địch lớn, bàn mình là bản đồ nhỏ bên cạnh; kích thước theo chiều cao để vừa một màn hình. */
.bs-arena { position:relative; display:flex; justify-content:center; align-items:flex-start; gap:16px; max-width:1100px; margin:0 auto; }
.bs-sea-enemy .bs-board-frame { width:min(calc(100vw - 330px), calc(100dvh - 205px), 760px); }
.bs-side { display:flex; flex-direction:column; gap:12px; width:220px; flex:none; }
.bs-side-info { display:flex; flex-direction:column; gap:10px; }
.bs-side-info .bs-sound { margin:0; }
.bs-sea-mine .bs-board-frame { width:100%; padding:4px; }
.bs-sea-mine .bs-board { border-width:2px; }
.bs-arena-single .bs-board-frame { width:min(100%, calc(100dvh - 260px), 560px); }
.bs-arena-single { display:block; max-width:560px; }
.bs-sea { min-width:0; }
.bs-team-red { --bs-line:#e2452a; --bs-frame:#7a2218; --bs-sea:#8a3328; --bs-grid:rgba(255,190,170,.16); }
.bs-team-blue { --bs-line:#3fa2e8; --bs-frame:#1c4f7a; --bs-sea:#22669c; --bs-grid:rgba(170,220,255,.18); }
.bs-board-frame {
  display:block; margin:0 auto; padding:6px;
  border:3px solid var(--gx-ink); background:var(--bs-frame, #1c4f7a);
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.15), inset -3px -3px 0 rgba(0,0,0,.35), 5px 5px 0 var(--gx-ink);
}
.bs-board-frame.is-live { box-shadow:inset 0 0 0 3px var(--gx-gold), 5px 5px 0 var(--gx-ink); }
.bs-board {
  position:relative; width:100%; aspect-ratio:1; overflow:hidden;
  border:3px solid var(--gx-ink); background:var(--bs-sea, #22669c);
}
.bs-grid, .bs-ships, .bs-shots { position:absolute; inset:0; }
.bs-grid { display:grid; grid-template-columns:repeat(10, 1fr); grid-template-rows:repeat(10, 1fr); z-index:1; }
.bs-cell { position:relative; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent;
  box-shadow:inset -1px -1px 0 rgba(10,20,32,.35), inset 1px 1px 0 var(--bs-grid, rgba(170,220,255,.18)); cursor:default; }
.bs-cell:disabled { opacity:1; }
.bs-cell.bs-can-shoot { cursor:crosshair; }
.bs-cell.bs-can-shoot:hover, .bs-cell.bs-can-shoot:focus-visible { background:rgba(255,211,107,.18); outline:none; }
.bs-cell.bs-can-shoot:hover::before, .bs-cell.bs-can-shoot:focus-visible::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--gx-gold), var(--gx-gold)) 0 0 / 35% 3px, linear-gradient(var(--gx-gold), var(--gx-gold)) 0 0 / 3px 35%,
    linear-gradient(var(--gx-gold), var(--gx-gold)) 100% 0 / 35% 3px, linear-gradient(var(--gx-gold), var(--gx-gold)) 100% 0 / 3px 35%,
    linear-gradient(var(--gx-gold), var(--gx-gold)) 0 100% / 35% 3px, linear-gradient(var(--gx-gold), var(--gx-gold)) 0 100% / 3px 35%,
    linear-gradient(var(--gx-gold), var(--gx-gold)) 100% 100% / 35% 3px, linear-gradient(var(--gx-gold), var(--gx-gold)) 100% 100% / 3px 35%,
    linear-gradient(#ff5b3b, #ff5b3b) center / 3px 3px;
  background-repeat:no-repeat; animation:bs-aim .5s steps(2) infinite;
}
@keyframes bs-aim { 50% { transform:scale(.8); } }
.bs-ships { z-index:2; pointer-events:none; }
.bs-ship { position:absolute; padding:0; border:0; background:transparent; cursor:grab; pointer-events:auto; touch-action:none;
  filter:drop-shadow(2px 2px 0 rgba(10,20,32,.6)); }
.bs-ship[disabled] { pointer-events:none; }
.bs-ship.is-selected { outline:3px dashed var(--gx-gold); outline-offset:-2px; }
.bs-ship img { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; }
.bs-ship.is-vertical img {
  width:calc(var(--len) * 100%); height:calc(100% / var(--len));
  inset:auto; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg);
}
.bs-team-red .bs-ship img, .bs-drag-ghost.bs-team-red img { filter:sepia(.9) saturate(3.2) hue-rotate(318deg) brightness(.95); }
.bs-team-blue .bs-ship img, .bs-drag-ghost.bs-team-blue img { filter:sepia(.8) saturate(2.4) hue-rotate(170deg); }
.bs-ship.is-burning img { filter:grayscale(.7) brightness(.5) sepia(.4); }
.bs-ship.is-burning:not(.is-vertical) img { transform:translateY(12%); }
.bs-ship.is-burning.is-vertical img { transform:translate(-40%,-50%) rotate(90deg); }
.bs-shots { z-index:3; pointer-events:none; }
.bs-mark { position:absolute; width:10%; aspect-ratio:1; transform:translate(-50%,-50%); background:center / 80% no-repeat; image-rendering:pixelated; }
.bs-miss { background-image:url("../assets/games/battleship/miss.svg"); }
.bs-hit { background-image:url("../assets/games/battleship/hit.svg"); background-size:100%; animation:bs-flicker .6s steps(2) infinite; }
@keyframes bs-flicker { 50% { filter:brightness(1.3) hue-rotate(-10deg); } }
.bs-new-shot { animation:bs-pop .45s steps(3) both; }
.bs-new-shot.bs-hit { animation:bs-pop .45s steps(3) both, bs-flicker .6s steps(2) .45s infinite; }
@keyframes bs-pop { 0% { transform:translate(-50%,-50%) scale(.3); } 60% { transform:translate(-50%,-50%) scale(1.5); } 100% { transform:translate(-50%,-50%) scale(1); } }
.bs-drag-ghost { position:fixed; z-index:100; height:30px; pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(3px 3px 0 #0a1420); }
.bs-drag-ghost.is-vertical { transform:translate(-50%,-50%) rotate(90deg); }
.bs-drag-ghost img { display:block; width:100%; height:100%; image-rendering:pixelated; }

/* ---- màn kết quả ---- */
.bs-victory {
  position:fixed; inset:0; z-index:55; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:16px;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 3px, transparent 3px 6px), rgba(5,12,20,.88);
}
.bs-victory-rays {
  position:absolute; left:50%; top:45%; width:180vmax; height:180vmax; margin:-90vmax 0 0 -90vmax; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,211,107,.16) 0 10deg, transparent 10deg 20deg);
  animation:bs-rays 8s steps(24) infinite;
}
.bs-victory.is-lose .bs-victory-rays { background:repeating-conic-gradient(rgba(120,140,160,.08) 0 10deg, transparent 10deg 20deg); animation-duration:20s; }
@keyframes bs-rays { to { transform:rotate(360deg); } }
.bs-victory-card {
  position:relative; width:min(100%, 420px); padding:14px 16px 16px; text-align:center;
  border:3px solid var(--gx-ink); background:var(--gx-panel);
  box-shadow:inset 0 0 0 3px var(--bs-line), inset 0 0 0 6px var(--gx-ink), 8px 8px 0 #000;
  animation:bs-card-in .5s steps(5) both;
}
@keyframes bs-card-in { from { transform:translateY(-120%); } to { transform:translateY(0); } }
.bs-victory-title {
  margin:-40px auto 8px; padding:4px 18px; width:max-content; max-width:100%;
  border:3px solid var(--gx-ink); background:#e0a336; color:#231a08; font-size:clamp(38px, 9vw, 58px); line-height:1;
  text-transform:uppercase; letter-spacing:2px; text-shadow:3px 3px 0 #fff3c4; box-shadow:5px 5px 0 var(--gx-ink);
  animation:bs-title 1s steps(2) infinite;
}
@keyframes bs-title { 50% { background:var(--gx-gold); } }
.bs-victory.is-lose .bs-victory-title { background:#5b6b78; color:#e8f2f6; text-shadow:3px 3px 0 var(--gx-ink); animation:none; }
.bs-victory-card img { display:block; height:min(34vh, 240px); margin:6px auto; image-rendering:pixelated; filter:drop-shadow(6px 6px 0 #000); }
.bs-victory.is-lose .bs-victory-card img { filter:grayscale(.6) drop-shadow(6px 6px 0 #000); }
.bs-victory-card p { margin:4px 0 10px; font-size:21px; line-height:1.05; color:var(--gx-text); }
.bs-victory-card p strong { font-weight:400; }
.bs-victory-stats { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.bs-victory-stats span { padding:2px 8px; border:3px solid var(--gx-ink); background:#07111b; color:var(--gx-muted); font-size:17px; }
.bs-victory-stats b { color:#ffcf7a; font-weight:400; font-size:21px; }

/* ---- Ném rổ ---- */
/* Sân chơi phủ hết chiều cao dưới thanh tiêu đề, rộng tối đa 440px (máy tính); chạm chỗ nào trong sân cũng nảy bóng. */
.game-panel.is-hoop { padding:8px; }
.game-panel.is-hoop .game-header { margin:-2px -2px 6px; }
.hoop-stage { height:100%; touch-action:none; user-select:none; -webkit-user-select:none; }
#hoopCanvas {
  display:block; width:100%; max-width:440px; height:100%; margin:0 auto; box-sizing:border-box;
  border:3px solid var(--gx-ink);
  image-rendering:pixelated; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  cursor:pointer;
}
.hoop-menu, .hoop-over { max-width:460px; min-height:100%; margin:0 auto; display:flex; flex-direction:column; }
/* Nút Chơi / Chơi lại luôn nằm ở đáy màn hình, danh sách dài thì cuộn phía trên. */
.hoop-cta { position:sticky; bottom:0; margin-top:auto; padding:14px 0 4px; background:var(--gx-deep); }
.hoop-cta.bs-actions { margin-bottom:0; }
.hoop-cta .bs-primary { min-height:48px; font-size:24px; }
.hoop-heading { margin:18px 0 6px; color:var(--gx-gold); font-size:24px; font-weight:400; text-shadow:2px 2px 0 var(--gx-ink); }
.hoop-empty { color:var(--gx-muted); font-size:18px; }
.hoop-scores { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.hoop-scores li {
  display:grid; grid-template-columns:30px 1fr auto 60px; align-items:center; gap:8px; padding:4px 10px;
  border:3px solid var(--gx-ink); background:var(--gx-panel); font-size:20px; box-shadow:3px 3px 0 var(--gx-ink);
}
.hoop-scores li.is-me { background:var(--gx-plate); }
.hoop-scores li.is-new { box-shadow:inset 0 0 0 3px var(--gx-gold), 3px 3px 0 var(--gx-ink); animation:bs-blink 1s steps(2) 4; }
.hoop-rank { color:var(--gx-muted); }
.hoop-scores strong { font-weight:400; }
.hoop-streak { color:var(--gx-muted); font-size:16px; }
.hoop-scores b { font-weight:400; color:#ffcf7a; text-align:right; font-size:24px; }
.hoop-over { text-align:center; }
.hoop-over .hoop-scores { text-align:left; }
.hoop-over-title { color:var(--gx-gold); font-size:44px; line-height:1; text-transform:uppercase; text-shadow:3px 3px 0 var(--gx-ink); }
.hoop-badge { display:inline-block; margin:8px 0 0; padding:2px 12px; border:3px solid var(--gx-ink); background:#e0a336; color:#231a08;
  font-size:22px; text-transform:uppercase; box-shadow:3px 3px 0 var(--gx-ink); animation:bs-title 1s steps(2) infinite; }
.hoop-result { display:flex; justify-content:center; gap:10px; margin:12px 0 4px; }
.hoop-result span { padding:2px 10px; border:3px solid var(--gx-ink); background:#07111b; color:var(--gx-muted); font-size:18px; }
.hoop-result b { font-weight:400; font-size:28px; color:#ffcf7a; }

/* ---- lớp hiệu ứng, bong bóng thoại ---- */
.bs-fx-canvas { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:60; image-rendering:pixelated; }
.bs-bubble {
  position:fixed; z-index:61; transform:translate(-50%, 8px); opacity:0; max-width:min(80vw, 380px); padding:6px 14px;
  border:3px solid #0a1420; border-radius:0; background:#fff8e6; color:#1a1a24; font:20px/1.1 'VT323', monospace; text-align:center;
  pointer-events:none; box-shadow:inset 0 0 0 3px var(--bs-line, #3fa2e8), 5px 5px 0 #0a1420;
  transition:opacity .15s steps(2), transform .15s steps(2);
}
.bs-bubble.is-shown { opacity:1; transform:translate(-50%, 0); }

/* ---- Cờ Caro ---- */
.caro-cover { max-width:470px; margin:25px auto; text-align:center; color:var(--gx-muted); font-size:20px; }
.caro-cover h3 { color:var(--gx-gold); font-size:32px; font-weight:400; text-shadow:3px 3px 0 var(--gx-ink); }
.caro-symbol { color:#ff7d6b; font-size:40px; letter-spacing:6px; text-shadow:3px 3px 0 var(--gx-ink); }
.caro-heading { margin:8px 0; text-align:center; font-size:30px; color:var(--gx-gold); text-shadow:3px 3px 0 var(--gx-ink); }
.caro-players { display:flex; justify-content:center; gap:14px; font-size:22px; margin:8px; }
.caro-players span { padding:2px 10px; border:3px solid var(--gx-ink); background:var(--gx-panel); box-shadow:3px 3px 0 var(--gx-ink); }
.caro-x { color:#ff7d6b; }
.caro-o { color:#7cc6ff; }
.caro-board { display:grid; grid-template-columns:repeat(15, minmax(0, 1fr)); grid-template-rows:repeat(15, minmax(0, 1fr));
  width:min(100%, 74dvh, 720px); aspect-ratio:1; margin:12px auto; padding:0;
  border:3px solid var(--gx-ink); background:#e9dcb8; box-shadow:inset 0 0 0 3px #b89a62, 5px 5px 0 var(--gx-ink); }
.caro-cell { min-width:0; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:0;
  border:0; border-radius:0; box-shadow:inset -1px -1px 0 #b89a62; background:transparent;
  font:clamp(18px, 4vw, 34px)/1 'VT323', monospace; cursor:pointer; }
/* Quân X/O là icon pixel (assets/games/caro/x.svg, o.svg); chữ trong ô chỉ để đọc màn hình. */
.caro-cell.caro-x, .caro-cell.caro-o { color:transparent; background:center / 76% no-repeat; image-rendering:pixelated; }
.caro-cell.caro-x { background-image:url("../assets/games/caro/x.svg"); }
.caro-cell.caro-o { background-image:url("../assets/games/caro/o.svg"); }
.caro-cell.caro-last { background-color:#ffd36b; }
.caro-cell:disabled { opacity:1; cursor:default; }
.caro-cell:not(:disabled):hover { background:rgba(255,211,107,.55); }
.caro-last { background:#ffd36b; box-shadow:inset 0 0 0 2px #0a1420; }
.caro-draw, .caro-footer { width:min(100%, 720px); margin:12px auto; text-align:center; color:var(--gx-muted); }

@media (max-width:760px) {
  .game-panel.is-battle { padding:10px; }
  .game-panel.is-battle .game-header { margin-bottom:8px; }
  .bs-hud { gap:8px; margin-bottom:8px; }
  .bs-arena { flex-direction:column; align-items:stretch; gap:10px; }
  .bs-sea-enemy .bs-board-frame { width:min(100%, calc(100dvh - 370px)); }
  .bs-side { width:auto; flex-direction:row; align-items:stretch; }
  .bs-sea-mine { width:min(42%, 150px); flex:none; }
  .bs-side-info { flex:1; min-width:0; justify-content:space-between; }
  .bs-side-info .bs-hud-center { flex:1; }
  .bs-avatar { width:44px; height:44px; }
  .bs-plate strong { font-size:21px; }
}
}
@media (max-width:400px) {
  .game-card img, .game-soon-icon { width:60px; }
  .bs-toolbar { align-items:stretch; flex-direction:column; }
  .bs-toolbar span { text-align:left; }
  .bs-plate { padding:6px; gap:6px; }
  .bs-plate small { display:none; }
  .bs-fleet li, .bs-fleet li img { height:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .bs-hit, .bs-new-shot, .bs-cell.bs-can-shoot:hover::before,
  .bs-turn.is-mine strong, .bs-plate.is-turn .bs-avatar, .bs-victory-rays, .bs-victory-title, .bs-victory-card { animation:none; }
}
/* Toast cộng điểm pet — kiểu pixel đồng bộ menu/panel (2026-09-28): VT323, viền vuông 3px,
   bóng đổ cứng, hiện lên theo nấc (steps) thay vì trượt mượt. */
.pet-points-toast {
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%); z-index:150; pointer-events:none;
  display:flex; align-items:baseline; gap:8px;
  width:max-content; max-width:calc(100vw - 32px); box-sizing:border-box;
  padding:7px 12px; border:3px solid #313545; border-radius:4px;
  background:#151820; color:#bcefc1;
  font-family:'VT323', monospace; font-size:19px; line-height:1.1;
  text-align:center; box-shadow:6px 6px 0 rgba(0,0,0,.58); image-rendering:pixelated;
  animation:pet-toast-in .24s steps(3, end);
}
.pet-points-toast b { color:#ffd36b; font-weight:700; white-space:nowrap; }
.pet-points-toast span { color:#bcefc1; }
@keyframes pet-toast-in {
  from { opacity:0; transform:translate(-50%, 9px); }
  to { opacity:1; transform:translate(-50%, 0); }
}
@media (prefers-reduced-motion:reduce) {
  .pet-points-toast { animation:none; }
}
.test-panel {
  position:fixed; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:15;
  display:flex; flex-direction:column; gap:6px; max-width:170px; padding:6px 8px;
  border:3px solid #0a1420; background:#15314a; color:#e8f2f6; font:16px/1.05 'VT323', monospace;
  box-shadow:inset 0 0 0 3px #ffb13b, 4px 4px 0 #0a1420;
}
.test-panel b { color:#ffb13b; font-weight:400; font-size:20px; letter-spacing:2px; }
.test-panel button { padding:3px 8px; border:3px solid #0a1420; background:#1c4262; color:#e8f2f6; font:inherit; font-size:17px;
  cursor:pointer; box-shadow:inset 2px 2px 0 rgba(255,255,255,.15), inset -2px -2px 0 rgba(0,0,0,.35); }
.test-panel button:hover { background:#3b7bab; }
.tank-shell { width:min(100%,440px,calc((100dvh - 76px) * 9 / 16)); margin:0 auto; }
.game-header-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.game-header-actions[hidden] { display:none; }
.game-header-actions .bs-subtle { min-height:30px; padding:3px 7px; font-size:16px; white-space:nowrap; }
.game-panel.is-tank .game-header { gap:5px; }
.game-panel.is-tank .game-header h2 { font-size:20px; letter-spacing:0; }
.game-panel.is-tank .panel-body { padding-bottom:0; }
.tank-top-overlay { position:absolute; top:0; left:0; right:0; padding:10px 8px 4px; background:linear-gradient(#142735ed, #14273599 75%, transparent); pointer-events:none; }
.tank-cover-art { width:100px; image-rendering:pixelated; }
.tank-hud { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tank-player { display:flex; gap:6px; align-items:center; flex:1; min-width:0; color:#f08074; }
.tank-player.is-blue { color:#6bc4f3; flex-direction:row-reverse; text-align:right; }
.tank-player img { width:32px; height:32px; object-fit:cover; border-radius:4px; }
.tank-player span { flex:1; font-size:18px; }
.tank-player b { display:block; font-size:14px; font-weight:normal; }
.tank-player i { display:block; height:7px; background:#303e46; }
.tank-player em { display:block; height:100%; background:currentColor; transition:width .3s; }
.tank-turn,.tank-wind { text-align:center; margin:5px 0; color:#ffd36a; }
.tank-wind { font-size:16px; color:#c0dde3; }
.tank-field { position:relative; overflow:hidden; border:2px solid #556878; }
#tankCanvas { display:block; width:100%; aspect-ratio:9/16; image-rendering:pixelated; }
.tank-controls { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1.1fr 1.15fr; gap:6px; padding:12px 8px; background:linear-gradient(transparent, #664a39cc 30%); }
.tank-drive,.tank-fire,.tank-aim { display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; }
.tank-drive span { font-size:15px; text-align:center; }
.tank-weapons,.tank-move { display:flex; justify-content:center; gap:4px; }
.tank-weapons button,.tank-move button { flex:1; min-width:0; }
.tank-weapons .tank-weapon { font-size:14px; padding:8px 1px; letter-spacing:0; }
.tank-weapons .tank-weapon.is-active { background:#ffcf68; color:#231a08; border-color:#fff0af; box-shadow:inset 0 0 0 2px #aa7025; }
.tank-fuel span { display:block; font-size:13px; white-space:nowrap; }
.tank-fuel-bar { height:7px; margin-top:4px; background:#292b2e; border:1px solid #b4ab84; overflow:hidden; }
.tank-fuel-bar i { display:block; height:100%; background:#a1d275; transition:width .15s; }
.tank-controls button { padding:8px 4px; font-size:16px; }
.tank-fire .bs-primary { min-height:50px; font-size:18px; }
.tank-aim { align-items:center; }
.tank-aim-pad { position:relative; width:min(100%,110px); aspect-ratio:1; padding:0; border:2px solid #ddc39b; border-radius:50%; touch-action:none; user-select:none; background:radial-gradient(circle, #aa85644d 0 30%, transparent 31% 62%, #e5c49333 63% 65%, transparent 66%), #2d272999; box-shadow:inset 0 0 12px #0005; cursor:crosshair; }
.tank-aim-pad::before,.tank-aim-pad::after { content:''; position:absolute; background:#ddc39b44; pointer-events:none; }
.tank-aim-pad::before { left:10%; right:10%; top:50%; height:1px; }
.tank-aim-pad::after { top:10%; bottom:10%; left:50%; width:1px; }
.tank-aim-pad:disabled { opacity:.4; cursor:default; }
.tank-aim-pad:focus-visible { outline:2px solid #ffe17b; outline-offset:3px; }
.tank-pad-knob { position:absolute; width:22%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#ffda81; box-shadow:0 2px 5px #0008; pointer-events:none; }
.tank-pad-line { position:absolute; left:50%; top:calc(50% - 1px); height:2px; width:38%; background:#ffda81; transform-origin:left center; pointer-events:none; }
.tank-aim-readout { font-size:14px; white-space:nowrap; color:#ffdda0; }
.tank-draw { text-align:center; padding:8px; color:#ffd36a; }

/* Bắn tăng: colorful cartoon artillery UI. */
.game-panel.is-tank { font-family:Arial,sans-serif; background:#101e2a; box-shadow:none; }
.game-panel.is-tank .game-header { background:linear-gradient(#294454,#172c3a); border:0; border-radius:8px; box-shadow:0 2px 6px #0007; margin-bottom:8px; }
.game-panel.is-tank .game-header h2 { font-family:Arial,sans-serif; font-weight:900; font-size:18px; color:#ffdb78; text-shadow:0 2px 0 #6b451f; }
.game-panel.is-tank .game-header .panel-close,.game-panel.is-tank .game-header .game-back { border:1px solid #607d8e; border-radius:7px; background:linear-gradient(#526f7f,#2a4353); box-shadow:0 2px 0 #091822; }
.game-panel.is-tank .bs-primary:not(.bs-victory *),.game-panel.is-tank .bs-subtle:not(.bs-victory *) { font-family:Arial,sans-serif; letter-spacing:0; border-radius:8px; border:1px solid #7498a7; background:linear-gradient(#54798b,#2c4b61); box-shadow:inset 0 1px 0 #ffffff55,0 3px 0 #14232d,0 5px 8px #0005; font-weight:800; text-shadow:0 1px 2px #0008; }
.game-panel.is-tank .bs-primary:not(.bs-victory *) { background:linear-gradient(#ffe376,#ffb432 65%,#ee8e1d); border-color:#fff0a7; color:#4f2c12; box-shadow:inset 0 1px 0 #fff9,0 4px 0 #9a4d16,0 6px 10px #0007; text-shadow:0 1px 0 #ffe8a8; }
.game-panel.is-tank button:active:not(:disabled) { transform:translateY(2px); }
.game-panel.is-tank button:disabled { filter:grayscale(.6); opacity:.48; }
.game-panel.is-tank .game-header-actions .bs-subtle { font-size:11px; min-height:29px; padding:4px 6px; }
.game-panel.is-tank .caro-cover { font-size:15px; line-height:1.7; }
.game-panel.is-tank .caro-cover h3 { color:#ffdd7d; font-size:28px; }
.tank-field { border:2px solid #7694a4; border-radius:13px; box-shadow:0 7px 20px #0008,inset 0 0 0 1px #ffffff22; }
#tankCanvas { image-rendering:auto; }
.tank-top-overlay { padding:12px 9px 10px; background:linear-gradient(#173043ed,#193448b3 65%,transparent); }
.tank-hud { gap:7px; }
.tank-hud>strong { color:#ffdf88; font-size:13px; font-weight:900; font-style:italic; text-shadow:0 2px 0 #53351f; }
.tank-player { gap:5px; }
.tank-player img { width:29px; height:29px; border:2px solid currentColor; border-radius:9px; background:#243b4b; }
.tank-player span { font-size:11px; font-weight:800; text-shadow:0 1px 2px #0008; }
.tank-player b { font-size:9px; margin:3px 0; color:#fff2d5; font-weight:700; }
.tank-player i { height:8px; border-radius:5px; border:1px solid #ffffff66; background:#132c3c; overflow:hidden; }
.tank-player em { background:linear-gradient(#ffb794,#f06c54); border-radius:4px; }
.tank-player.is-blue em { background:linear-gradient(#9de6ff,#3ab4ed); }
.tank-turn { font-size:12px; font-weight:900; margin-top:8px; text-shadow:0 2px 3px #000; }
.tank-wind { display:table; margin:5px auto 0; padding:3px 9px; font-size:10px; font-weight:700; border-radius:20px; background:#12283eaa; color:#e2f2ff; }
.tank-controls { grid-template-columns:1.3fr .95fr 1.1fr; align-items:end; padding:14px 9px 15px; gap:8px; background:linear-gradient(transparent,#392c24bb 25%,#211f23ee); }
.tank-drive,.tank-fire,.tank-aim { gap:8px; }
.tank-controls .tank-weapons { gap:4px; }
.tank-controls .tank-weapon { font-size:10px; padding:7px 1px; min-height:48px; }
.game-panel.is-tank .tank-weapon.is-active { color:#4c3015; border-color:#fff0ad; background:linear-gradient(#fff1b2,#ffc858); box-shadow:0 0 10px #ffd36a44,inset 0 1px 0 #fff8,0 3px 0 #90601e; text-shadow:none; }
.tank-controls .tank-move button { padding:5px 4px; min-height:31px; font-size:15px; }
.tank-fuel span { font-size:9px; color:#ead9b8; text-align:left; }
.tank-fuel b { float:right; color:#c0f58a; }
.tank-fuel-bar { height:8px; border-radius:5px; border-color:#697349; background:#24281d; }
.tank-fuel-bar i { background:linear-gradient(#d5f98f,#79b346); border-radius:4px; }
.tank-fire { align-self:center; }
.tank-fire .bs-primary { min-height:66px; padding:8px 3px; font-size:13px; line-height:1.4; border-radius:12px; }
.tank-aim-pad { width:min(100%,110px); border:3px solid #b3c8d1; background:radial-gradient(circle,#3d5f75 0 25%,#253c51 26% 60%,#446176 61% 64%,#203348 65%); box-shadow:inset 0 2px 5px #0008,0 3px 0 #0b1e2d,0 5px 12px #0007; }
.tank-pad-knob { background:radial-gradient(circle at 35% 25%,#fff0b9,#ffd068 55%,#c18931); box-shadow:0 2px 0 #754518,0 4px 7px #0008; }
.tank-pad-line { background:#ffe4a0; box-shadow:0 0 4px #ffcf6f; }
.tank-aim-readout { font-size:9px; font-weight:700; color:#ffe4a9; }

.game-panel.is-tank .bs-victory { font-family:'VT323', monospace; }

.tank-map-view { pointer-events:auto; margin-left:6px; border:1px solid #8296a9; border-radius:4px; padding:2px 5px; background:#173043; color:#dcecff; font:inherit; font-size:10px; cursor:pointer; }
/* Incoming Battleship aim: an overlay never intercepts a shot or drag. */
.bs-aim-marker { position:absolute; width:10%; height:10%; box-sizing:border-box; border:2px solid #ffce69; background:#ffab3526; box-shadow:inset 0 0 12px #ff7c4144,0 0 9px #ffb35066; z-index:8; pointer-events:none; animation:bs-aim-pulse .8s ease-in-out infinite alternate; }
.bs-aim-marker[hidden] { display:none; }
.bs-aim-note { min-height:1.5em; margin-top:8px; color:#ffd16b; font-size:12px; }
.bs-aim-note.is-aimed { text-shadow:0 0 8px #ff973644; }
@keyframes bs-aim-pulse { to { opacity:.55; } }
@media (prefers-reduced-motion:reduce) { .bs-aim-marker { animation:none; } }

/* Nút "‹ Kho hình" ở đầu lightbox (xem story / ảnh), cùng hàng với nút X (2026-09-29). */
.lightbox-top { display:flex; align-items:center; min-height:28px; margin:-3px 40px 8px 0; }
.lightbox-back {
  padding:2px 10px; border:2px solid #454c60; border-radius:3px; background:#292e3b; color:#cfd4df;
  font-family:'VT323', monospace; font-size:16px; cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.lightbox-back:hover { background:#3a4051; color:#fff; }

/* iPhone có tai thỏ / Dynamic Island: app bật viewport-fit=cover + thanh trạng thái trong suốt
   nên nội dung vẽ tới sát mép trên. Chừa khoảng an toàn cho mọi thứ dính mép trên (2026-09-29). */
:root { --safe-top: env(safe-area-inset-top, 0px); }
.gear, .gallery-btn, .game-btn, .checkin-fab { top:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
.settings-menu { top:auto; bottom:calc(60px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:1024px) {
  .gear, .gallery-btn, .game-btn { top:calc(10px + var(--safe-top)); bottom:auto; }
  .checkin-fab { top:auto; bottom:14px; }
  .settings-menu { top:calc(58px + var(--safe-top)); bottom:auto; }
}
.topbar-overlay { top: calc(12px + var(--safe-top)); }
@media (min-width:1024px) { .game-btn { top: calc(10px + var(--safe-top)); } }
.backdrop:not(#gameBackdrop) { padding-top: var(--safe-top); box-sizing: border-box; }
.game-panel.is-battle { padding-top: calc(18px + var(--safe-top)); }
.game-panel.is-hoop { padding-top: calc(8px + var(--safe-top)); }
.bs-victory { padding-top: calc(16px + var(--safe-top)); }

/* Bắn tăng: UI sci-fi kiểu mobile game (navy + panel xanh phát sáng, vát góc, font Oswald) — 2026-10-01.
   Ghi đè các rule tank cũ phía trên; chỉ áp cho màn trong trận + màn thắng/thua. */
.game-panel.is-tank { --tk-navy:#071a46; --tk-panel:#0d2c6e; --tk-glow:#2fa8ff; --tk-gold:#ffbf2e; --tk-text:#cfe4ff;
  font-family:'Oswald',sans-serif; background:radial-gradient(120% 60% at 50% 0%,#0d2c6e,#061536 70%); }
.game-panel.is-tank .game-header { background:linear-gradient(#3a4250,#20252f); border:2px solid #555f70; border-radius:6px;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); box-shadow:inset 0 1px 0 #ffffff22; }
.game-panel.is-tank .game-header h2 { font-family:'Oswald',sans-serif; font-weight:600; font-size:20px; letter-spacing:.5px; color:var(--tk-gold); text-shadow:0 2px 0 #00000088; text-transform:uppercase; }
.game-panel.is-tank .bs-primary:not(.bs-victory *),.game-panel.is-tank .bs-subtle:not(.bs-victory *) {
  font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.3px; color:#e9f4ff; border:1.5px solid #4fc0ff; border-radius:7px;
  background:repeating-linear-gradient(0deg,#ffffff08 0 2px,transparent 2px 4px),linear-gradient(#1f7fe0,#0d4fb5 55%,#0a3d94);
  box-shadow:inset 0 0 0 1px #0a2e6e,inset 0 2px 0 #8fdcff66,0 0 8px #2fa8ff55,0 3px 0 #04163d; text-shadow:0 1px 2px #001a4a; }
.game-panel.is-tank .bs-primary:not(.bs-victory *) { color:#3a1a00; border-color:#ffe28a; text-shadow:0 1px 0 #ffe7a3;
  background:linear-gradient(#ffd85a,#ffa61c 55%,#f07d0e); box-shadow:inset 0 2px 0 #fff6c299,inset 0 -3px 0 #c45a0866,0 0 12px #ffae2a66,0 3px 0 #6b2f05; }
.game-panel.is-tank button:active:not(:disabled) { transform:translateY(2px); filter:brightness(.92); }
.game-panel.is-tank button:disabled { filter:grayscale(.85) brightness(.75); opacity:.7; }
.tank-field { border:2px solid #2f7fd0; border-radius:10px; box-shadow:0 0 0 1px #0a2a66,0 0 16px #2fa8ff44,0 8px 22px #000a; }
/* HUD trên: thanh kim loại như thanh tài nguyên */
.tank-top-overlay { padding:8px 8px 10px; background:linear-gradient(#061536f2,#061536aa 70%,transparent); }
.tank-hud { gap:6px; padding:5px 6px; border:2px solid #4b5566; border-radius:8px; background:linear-gradient(#3a4250,#1e232c);
  box-shadow:inset 0 1px 0 #ffffff26,inset 0 -2px 0 #0007,0 3px 8px #0008; }
.tank-hud>strong { font-family:'Oswald',sans-serif; color:var(--tk-gold); font-size:15px; font-weight:700; font-style:normal; text-shadow:0 2px 0 #000; }
.tank-player img { width:30px; height:30px; border:2px solid currentColor; border-radius:6px; background:#0d2c6e; box-shadow:0 0 6px currentColor; }
.tank-player span { font-size:13px; font-weight:600; color:#fff; text-shadow:0 1px 2px #000; }
.tank-player { color:#ff7a5c; }
.tank-player.is-blue { color:#3fc0ff; }
.tank-player i { position:relative; height:12px; border-radius:3px; border:1px solid #0a1a3a; background:#0b1f4a; box-shadow:inset 0 1px 2px #000a; margin-top:2px; }
.tank-player em { background:linear-gradient(#ff9e7e,#e8432a); border-radius:2px; }
.tank-player.is-blue em { background:linear-gradient(#8fe4ff,#1f8fe0); }
.tank-player b { position:absolute; display:block; font-size:10px; font-weight:500; margin:0; color:#fff; text-shadow:0 1px 1px #000; }
.tank-player span { position:relative; }
.tank-player b { right:4px; bottom:1px; z-index:1; line-height:12px; }
.tank-player.is-blue b { right:auto; left:4px; }
.tank-turn { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; letter-spacing:.5px; margin:7px 0 0; color:var(--tk-gold); text-transform:uppercase; text-shadow:0 2px 3px #000; }
.tank-wind { display:table; margin:4px auto 0; padding:2px 12px; font-size:12px; font-weight:500; border-radius:4px; color:var(--tk-text);
  border:1px solid #2f7fd0; background:#0a2a66cc; box-shadow:0 0 8px #2fa8ff44; }
/* Cụm điều khiển: trái di chuyển, giữa pad, phải khai hỏa + đạn */
.tank-controls { grid-template-columns:1fr 1fr 1.15fr; align-items:center; gap:8px; padding:12px 8px 12px;
  background:linear-gradient(transparent,#061536d9 22%,#061536f5); border-top:none; }
.tank-controls::before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; border:1.5px solid #2f7fd0; border-radius:8px 8px 0 0;
  background:linear-gradient(#0d2c6ecc,#081d4ccc); box-shadow:inset 0 0 14px #2fa8ff33,0 0 10px #2fa8ff33; }
.tank-controls { isolation:isolate; margin:0; border-radius:8px 8px 0 0; }
.tank-drive,.tank-fire,.tank-aim { gap:7px; }
.tank-controls .tank-move { gap:6px; }
.tank-controls .tank-move button { min-height:44px; padding:4px; font-size:18px; }
.tank-fuel span { font-size:11px; font-weight:500; color:var(--tk-text); text-align:left; letter-spacing:.3px; }
.tank-fuel-bar { position:relative; height:16px; margin-top:3px; border-radius:4px; border:1px solid #0a1a3a; background:#0b1f4a; box-shadow:inset 0 1px 3px #000a; }
.tank-fuel-bar i { background:linear-gradient(#5ff05f,#1fb02a); border-radius:3px; }
.tank-fuel-bar b, .tank-fuel b { position:absolute; inset:0; float:none; text-align:center; font-size:11px; font-weight:500; line-height:15px; color:#fff; text-shadow:0 1px 1px #000; }
.tank-aim { align-items:center; }
.tank-aim-pad { width:min(100%,104px); border:3px solid #6fd0ff; background:radial-gradient(circle,#1f6fd0 0 22%,#0d3a8a 23% 58%,#2fa8ff 59% 61%,#0a2a66 62%);
  box-shadow:0 0 14px #2fa8ff66,inset 0 0 12px #000a,0 3px 0 #04163d; }
.tank-aim-pad::before,.tank-aim-pad::after { background:#8fdcff44; }
.tank-pad-knob { background:radial-gradient(circle at 35% 25%,#fff6c2,#ffc23a 55%,#d07a0a); box-shadow:0 0 8px #ffbf2e,0 2px 4px #000a; }
.tank-pad-line { background:#ffd45a; box-shadow:0 0 5px #ffbf2e; }
.tank-aim-readout { font-size:12px; font-weight:500; color:var(--tk-text); }
.tank-aim-readout output { color:var(--tk-gold); }
.tank-fire { align-self:center; }
.tank-fire .bs-primary { min-height:48px; padding:6px 4px; font-size:19px; font-weight:700; letter-spacing:1px; border-radius:8px; }
.tank-controls .tank-weapons { gap:4px; }
.tank-controls .tank-weapon { min-height:38px; padding:3px 1px; font-size:12px; border-radius:6px; }
.game-panel.is-tank .tank-weapon.is-active { color:#fff; border-color:#e9a8ff; text-shadow:0 1px 2px #3a0060;
  background:repeating-linear-gradient(0deg,#ffffff0a 0 2px,transparent 2px 4px),linear-gradient(#c04dff,#8a1fe0 55%,#6a12b8);
  box-shadow:inset 0 2px 0 #f0c8ff88,0 0 10px #b44dff77,0 3px 0 #2c0656; }
.tank-draw { color:var(--tk-gold); }

/* Bắn tăng: buff, death time (2026-10-01). */
.tank-buffs { display:inline-flex; gap:2px; margin:0 4px; vertical-align:middle; }
.tank-player.is-blue .tank-buffs { flex-direction:row-reverse; }
.tank-buff { display:inline-block; min-width:16px; padding:0 3px; border-radius:4px; font-size:10px; font-style:normal; line-height:15px; text-align:center; color:#fff;
  background:#0a2a66; border:1px solid #2f7fd0; box-shadow:0 0 5px #2fa8ff66; }
.tank-buff.is-double { background:#6a12b8; border-color:#e9a8ff; font-weight:700; }
.tank-buff.is-combo { background:#7a2a05; border-color:#ffb02e; }
.tank-death { display:inline-block; margin-left:8px; padding:0 6px; border-radius:3px; font-weight:600; color:#fff; background:#b3121e; box-shadow:0 0 8px #ff2a2a99; animation:tank-death .9s ease-in-out infinite alternate; }
.tank-death.is-soon { background:#5a1a20; box-shadow:none; animation:none; color:#ffb3b3; }
@keyframes tank-death { to { box-shadow:0 0 14px #ff2a2a; filter:brightness(1.2); } }
@media (prefers-reduced-motion:reduce) { .tank-death { animation:none; } }

/* Bắn tăng: biểu tượng đạn SVG và hai lựa chọn online / luyện tập. */
.game-panel.is-tank .tank-weapon { opacity:.6; }
.game-panel.is-tank .tank-weapon.is-active { opacity:1; }
.tank-weapon-icon { display:block; height:17px; color:#dcf3ff; }
.tank-weapon-icon svg { width:19px; height:17px; vertical-align:top; }
.game-card-menu { cursor:default; flex-wrap:wrap; }
.game-card-actions { display:flex; gap:6px; margin-left:auto; }
.game-card-actions button { padding:7px 9px; white-space:nowrap; }
@media (max-width:440px) { .game-card-menu .game-card-actions { width:100%; justify-content:flex-end; } }

/* Private Battleship cards. */
.bs-own-column{width:100%;min-width:0}.bs-own-column .bs-sea-mine{width:100%}.bs-hand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}.bs-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:2px solid #7aaaba;background:#15394e;color:#eefcff;min-width:0;font:inherit}.bs-card:disabled{opacity:.45}.bs-card b{font-size:14px;line-height:1.15}.bs-card small{color:#ffd36b;font-size:11px}.bs-card em{font-size:11px}.bs-card-icon{font-size:24px;color:#a9eeff}.bs-card-state,.bs-card-notice{font-size:13px;color:#b7e7ef}.bs-card-state p{margin:4px 0}.bs-card-detail{padding:12px;margin-top:12px;border:2px solid #89b9cc;background:#173a4b;color:#eefaff}.bs-card-detail p{margin:8px 0}.bs-card-preview{background:#a6f5bb77!important;box-shadow:inset 0 0 0 2px #b1ffd3}.bs-shield-cell{box-shadow:inset 0 0 0 1px #88ddff}.bs-bomb-cell:after{content:'✹';color:#ffdb8b}.bs-blocked{width:7%;height:7%;border:2px solid #a6e9ff;border-radius:50%;background:#264e6a}.bs-arena.is-card-mine .bs-sea-enemy{display:none}.bs-arena.is-card-mine .bs-side{width:100%;max-width:480px;margin:auto}.bs-arena.is-card-mine .bs-own-column{width:100%}
@media(max-width:600px){.bs-own-column{width:42%;min-width:145px}.bs-arena.is-card-mine .bs-side{display:block}.bs-arena.is-card-mine .bs-side-info{margin-top:10px}.bs-card-detail .bs-actions{flex-wrap:wrap}}

.game-panel.is-battle .panel-body > .bs-hud,.game-panel.is-battle .panel-body > .bs-arena,.game-panel.is-battle .panel-body > .bs-card-detail { flex-shrink:0; }

.bs-card-modal { position:fixed; inset:0; margin:auto; width:min(360px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; box-sizing:border-box; padding:20px; box-shadow:0 0 0 4px #0b2233, 0 12px 48px #0009; font-family:inherit; }
.bs-card-modal::backdrop { background:#07131dcc; }
.bs-card-modal h3 { margin:0 0 12px; color:var(--gx-gold); font-size:22px; }
.bs-card-modal p { line-height:1.5; margin:0 0 20px; }
.bs-card-modal .bs-actions { display:flex; flex-wrap:nowrap; gap:10px; }
.bs-card-modal .bs-actions button { flex:1; min-width:0; }

/* Golden skill cards with pixel frames and naval badges. */
.bs-hand { gap:8px; padding:4px 1px 5px; }
.bs-card { position:relative; overflow:hidden; gap:5px; padding:10px 4px 7px; min-height:132px; border:2px solid #ffdc78; border-radius:0; background:linear-gradient(135deg,#ffecaa 0%,#edbe56 42%,#d28b29 100%); color:#362509; text-shadow:0 1px #fff0b277; box-shadow:inset 0 0 0 2px #9f651d,inset 0 0 0 4px #ffe49a,0 3px 0 #573914,0 0 12px #ffc74d25; cursor:pointer; }
.bs-card::before,.bs-card::after { content:''; position:absolute; width:7px; height:7px; border:1px solid #fff2b6; background:#704817; transform:rotate(45deg); top:7px; }
.bs-card::before { left:7px; }.bs-card::after { right:7px; }
.bs-card:disabled { opacity:1; cursor:default; }
.bs-card.is-spent { opacity:.5; filter:saturate(.35); }
.bs-card:not(:disabled):hover { filter:brightness(1.1); box-shadow:inset 0 0 0 2px #9f651d,inset 0 0 0 4px #ffe49a,0 3px 0 #573914,0 0 18px #ffd56666; }
.bs-card:not(:disabled):active { transform:translateY(2px); }
.bs-card:focus-visible { outline:3px solid #fff4bc; outline-offset:3px; }
.bs-card .bs-card-icon { display:grid; place-items:center; width:38px; height:38px; margin:2px 0; color:#ffe28a; background:linear-gradient(#24495b,#0c2635); border:2px solid #735020; box-shadow:0 0 0 2px #ffe8a2,inset 0 0 0 2px #3a6170; }
.bs-card-icon svg { width:27px; height:27px; filter:drop-shadow(0 1px 1px #0008); }
.bs-card b { color:#342309; font-size:15px; min-height:32px; display:flex; align-items:center; justify-content:center; text-align:center; }
.bs-card small { padding:2px 5px; color:#ffdd74; background:#634315; border:1px solid #fff1a699; font-size:11px; line-height:1.2; letter-spacing:1px; }
.bs-card em { margin-top:auto; font-style:normal; font-size:9px; font-weight:bold; letter-spacing:1px; color:#654116; }
.bs-card[data-rarity="5"] { box-shadow:inset 0 0 0 2px #9f651d,inset 0 0 0 4px #ffe49a,0 3px 0 #573914,0 0 18px #ffce6277; }
.bs-card-modal { border:3px solid #e9b84e; padding:24px 20px 20px; background:linear-gradient(135deg,#1d3f50,#102b3b); box-shadow:inset 0 0 0 2px #60471d,inset 0 0 0 5px #315363,0 0 0 4px #0b2233,0 12px 48px #0009; }
.bs-card-modal-emblem { display:grid; place-items:center; margin:0 auto 10px; width:64px; height:64px; color:#ffe195; background:linear-gradient(#395768,#142f3d); border:3px solid #ebbf61; box-shadow:inset 0 0 0 3px #0d2838,0 0 20px #ffd06c22; }
.bs-card-modal-emblem svg { width:42px; height:42px; }
.bs-card-modal-rarity { text-align:center; color:#ffcf61; letter-spacing:4px; margin-bottom:8px; }
.bs-card-modal h3 { text-align:center; text-shadow:2px 2px #071923; }

@media (max-width:600px) { .bs-card small { font-size:10px; letter-spacing:0; padding:2px 3px; max-width:calc(100% - 4px); box-sizing:border-box; } }

.bs-card-confirm-location { padding:10px; border:1px solid #c99a43; background:#091f2d; color:#ffe49a; text-align:center; }