/* ============================================================
   BEZON GAME - MODERN UI ENHANCEMENT SUITE
   High-Definition Gaming & Glassmorphism Aesthetic
   ============================================================ */

:root {
  --primary-glow: rgba(244, 183, 58, 0.35);
  --cherry-glow: rgba(224, 54, 44, 0.35);
  --emerald-glow: rgba(63, 138, 58, 0.35);
  --glass-bg: rgba(251, 243, 226, 0.94);
  --glass-border: rgba(107, 63, 31, 0.22);
  --hud-bg: linear-gradient(
    135deg,
    rgba(28, 54, 39, 0.92) 0%,
    rgba(19, 38, 27, 0.96) 100%
  );
  --chip-online: #10b981;
}

/* Ambient glow & smooth canvas container */
.canvasBox {
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(244, 183, 58, 0.25);
  position: relative;
  transition: box-shadow 0.3s ease;
}

.canvasBox:hover {
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.42),
    0 0 0 2px rgba(244, 183, 58, 0.45);
}

canvas#cv {
  border-radius: 16px;
  image-rendering: auto;
}

/* Header Modernization */
header.dktHead {
  border-radius: 16px !important;
  border: 2px solid rgba(244, 183, 58, 0.4) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(8px);
  background: linear-gradient(
    180deg,
    rgba(95, 184, 242, 0.95),
    rgba(201, 236, 255, 0.95)
  ) !important;
}

.chip#conn {
  background: rgba(19, 38, 27, 0.92) !important;
  color: #fff !important;
  border: 1.5px solid var(--gold) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  padding: 5px 14px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  transition: all 0.25s ease;
}

.chip#conn i {
  background: var(--chip-online) !important;
  box-shadow: 0 0 8px var(--chip-online);
  animation: pulseNeon 1.8s infinite ease-in-out;
}

@keyframes pulseNeon {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
    filter: drop-shadow(0 0 2px #10b981);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
    filter: drop-shadow(0 0 6px #10b981);
  }
}

/* Modern HUD Bar */
.hud {
  background: var(--hud-bg);
  padding: 8px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(244, 183, 58, 0.25) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  margin-top: 4px;
}

.hud .stat {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 5px 12px !important;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
}

.hud .stat:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-2px);
  border-color: rgba(244, 183, 58, 0.4) !important;
}

.hud .stat.cherry {
  border-color: rgba(224, 54, 44, 0.35) !important;
  box-shadow: inset 0 0 12px rgba(224, 54, 44, 0.12);
}

.hud .stat.cherry b {
  color: #ff6b6b !important;
  text-shadow: 0 0 8px rgba(224, 54, 44, 0.4);
}

.hud .stat.gold {
  border-color: rgba(244, 183, 58, 0.35) !important;
  box-shadow: inset 0 0 12px rgba(244, 183, 58, 0.12);
}

.hud .stat.gold b {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(244, 183, 58, 0.4);
}

.hud .me {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 5px 10px 5px 12px !important;
}

.hud .me b {
  color: #fff !important;
  font-size: 16px !important;
}

.hud .me small {
  color: #ffd27a !important;
}

.hud .me button.small {
  background: linear-gradient(135deg, #3f8a3a, #27503a) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.hud .me button.small:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #4ea348, #326449) !important;
}

/* Action Buttons in HUD */
.hud .shopBtn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #261603 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 12px rgba(217, 119, 6, 0.35),
    0 2px 0 #92400e !important;
  transition: all 0.18s ease;
}

.hud .shopBtn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(217, 119, 6, 0.45),
    0 3px 0 #92400e !important;
}

.hud .shopBtn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(217, 119, 6, 0.2) !important;
}

/* Grand Hái Button */
.hud .pick,
.tPick {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  border: 2px solid #fff !important;
  box-shadow:
    0 6px 20px rgba(239, 68, 68, 0.45),
    0 4px 0 #7f1d1d !important;
  transition: all 0.15s ease;
  overflow: hidden;
}

.hud .pick {
  position: relative;
}

.tPick {
  position: absolute;
}

.hud .pick:hover,
.tPick:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 8px 24px rgba(239, 68, 68, 0.6),
    0 5px 0 #7f1d1d !important;
}

.hud .pick:active,
.tPick:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0 2px 6px rgba(239, 68, 68, 0.3),
    0 1px 0 #7f1d1d !important;
}

@media (min-width: 901px) and (max-width: 1500px) {
  .hud {
    padding: 3px 5px !important;
    gap: 4px !important;
  }

  .hud .stat {
    padding: 3px 8px !important;
  }

  .hud .me {
    padding: 3px 6px !important;
    max-width: 270px;
  }

  .hud .shopBtn {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 11.5px !important;
  }

  .hud #sndBtn2 {
    display: none !important;
  }

  .hud .pick {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Floating Quick Dock Toolbar */
.floatingDock {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 5;
  background: rgba(19, 38, 27, 0.82);
  backdrop-filter: blur(10px);
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(244, 183, 58, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dockBtn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dockBtn:hover {
  background: rgba(244, 183, 58, 0.25);
  border-color: var(--gold);
  color: #ffd977;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 183, 58, 0.3);
}

.dockBtn.giftBtn {
  background: linear-gradient(135deg, #e11d48, #9f1239);
  border-color: #fda4af;
  animation: pulseGift 2.4s infinite ease-in-out;
}

@keyframes pulseGift {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.6);
  }
}

.dockBtn.helpBtn {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #7dd3fc;
}

/* Side Tabs Modernization */
.side {
  border: 1px solid rgba(244, 183, 58, 0.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3) !important;
  background: linear-gradient(180deg, #1c3627 0%, #13261b 100%) !important;
}

.sideTabs {
  background: rgba(0, 0, 0, 0.18) !important;
  padding: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sideTabs button {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  transition: all 0.2s ease;
}

.sideTabs button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.sideTabs button[aria-selected="true"] {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #241402 !important;
  font-weight: 800 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

/* Quests Progress Enhancement */
.qrow {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  padding: 8px 10px 12px !important;
  margin-bottom: 6px;
  transition: all 0.2s;
}

.qrow:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(3px);
}

.qrow i {
  height: 5px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.qrow i:after {
  border-radius: 99px !important;
  box-shadow: 0 0 8px rgba(244, 183, 58, 0.6);
}

/* Modals & Dialogs Overhaul */
.mapCard,
.shopCard,
.bagCard,
.chuaCard,
.histCard,
.mgCard,
.card {
  border-radius: 20px !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(244, 183, 58, 0.3) !important;
  border: none !important;
  overflow: hidden;
}

.mapCard .mh,
.shopHead {
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 8px;
}

.mapCard h3,
.shopHead h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.3px;
}

.mapGrid button {
  border-radius: 14px !important;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.mapGrid button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  border-color: #e08a1a !important;
}

/* Modern Strategy & Tips Modal */
.strategyModal,
.giftcodeModal {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(10, 20, 14, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInModal 0.22s ease-out;
}

@keyframes fadeInModal {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.strategyCard {
  background: #fbf3e2;
  color: #2a1a0e;
  border-radius: 20px;
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(244, 183, 58, 0.5);
}

.stratHead {
  background: linear-gradient(135deg, #1d3d24 0%, #13261b 100%);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stratHead h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stratClose {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.stratClose:hover {
  background: rgba(255, 255, 255, 0.28);
}

.stratBody {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.tipBox {
  background: #fff9ee;
  border: 1.5px solid rgba(107, 63, 31, 0.18);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tipBox b {
  color: #8f3414;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tipBox p {
  margin: 0;
  color: #4a3422;
}

.kbdGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.kbdItem {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kbdItem kbd {
  background: #2a1a0e;
  color: #ffd77a;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11.5px;
}

/* Giftcode Input Card */
.giftCard {
  background: #fbf3e2;
  color: #2a1a0e;
  border-radius: 20px;
  max-width: 440px;
  width: 100%;
  padding: 20px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(225, 29, 72, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.giftCard h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  color: #9f1239;
  display: flex;
  align-items: center;
  gap: 8px;
}

.giftInputRow {
  display: flex;
  gap: 8px;
}

.giftInputRow input {
  flex: 1;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 12px;
  border: 2px solid #e2cbb2;
  background: #fff;
  color: #2a1a0e;
}

.giftInputRow button {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  font-weight: 800;
  padding: 0 18px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

.giftCodesList {
  background: #fff5f5;
  border: 1px dashed #f43f5e;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #881337;
}

.giftCodesList code {
  background: #ffe4e6;
  color: #be123c;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.giftFeedback {
  min-height: 20px;
  font-size: 13.5px;
  font-weight: 700;
}

.giftFeedback.ok {
  color: #15803d;
}
.giftFeedback.err {
  color: #b91c1c;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb {
  background: rgba(107, 63, 31, 0.3);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 63, 31, 0.55);
}

/* ============================================================
   Sửa lỗi hiển thị (2026-11-14)
   ============================================================ */

/* Nút đóng (✕) trong hộp Giftcode / Dev Tools: nền kem nên phải dùng chữ tối. */
.giftCard .stratClose {
  background: rgba(42, 26, 14, 0.1);
  color: #2a1a0e;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}
.giftCard .stratClose:hover {
  background: rgba(42, 26, 14, 0.2);
}

/* Thanh bên: nội dung các tab được viết cho nền kem (chữ nâu tối). Khung ngoài
   giữ màu xanh đậm, còn mỗi tab là một thẻ kem giống khung chat để chữ đọc được. */
.side .pane:not([data-pane="chat"]) {
  background: #fbf3e2;
  color: #2a1a0e;
  border-radius: 14px;
  inset: 8px !important;
  padding: 10px 12px !important;
}
.side .pane .qrow {
  background: rgba(107, 63, 31, 0.07) !important;
  border: 1px solid rgba(107, 63, 31, 0.16) !important;
}
.side .pane .qrow:hover {
  background: rgba(107, 63, 31, 0.12) !important;
}
.side .pane .qrow i {
  background: rgba(107, 63, 31, 0.16) !important;
}

/* Hàng trên cùng của màn chơi: dock nút cố định bên phải, thông báo sự kiện
   nằm giữa phần còn trống bên trái dock (một dòng, cắt bằng …), chip trạng thái
   xuống ngay dưới dock. Ba thứ này trước đây chồng lên nhau. */
body:not(.mob) .evAnn {
  left: calc((100% - 520px) / 2);
  max-width: calc(100% - 550px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not(.mob) #conn.connOv {
  top: 68px;
  right: 14px;
}
/* Gợi ý "Thử ngay" chuyển xuống ngay trên thanh HUD, không chồng lên thông báo. */
body:not(.mob) #mkBar {
  top: auto;
  bottom: 64px;
}

/* Link trong hộp thoại (Đăng ký / Đăng nhập) theo tông màu game thay vì xanh mặc định. */
.mapCard .mapNote a {
  color: #b3432b;
  font-weight: 700;
  text-underline-offset: 3px;
}
.mapCard .mapNote a:hover {
  color: #7d2a18;
}