/* ==========================================================================
   POKÉMON ROUTE GUARDIANS - MOBILE LANDSCAPE & ORIENTATION ENFORCEMENT
   Version 5.0 - Pixel-perfect mobile landscape UI, zero overflow, zero overlap
   ========================================================================== */

/* Đảm bảo thuộc tính ẩn luôn được ưu tiên tuyệt đối */
.hidden, [hidden] {
  display: none !important;
}

/* Sửa lỗi watercolor.css đặt display:block cho .painted-icon:only-child làm rớt dòng chữ trong nút */
button > .painted-icon:only-child {
  display: inline-block !important;
  vertical-align: middle !important;
}

.slot-panel button,
.modal-foot button,
.map-card .route-actions button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.slot-panel button .icon,
.modal-foot button .icon,
.map-card .route-actions button .icon {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.settings-row button.active {
  background: #285c4e !important;
  color: #fff3d5 !important;
  border-color: #183e39 !important;
}

/* --------------------------------------------------------------------------
   1. KHÓA MÀN HÌNH DỌC & THÔNG BÁO XOAY NGANG (CHỐNG TRÀN 100%)
   -------------------------------------------------------------------------- */
@media screen and (orientation: portrait) and (max-width: 1024px) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    touch-action: none !important;
  }

  /* Ẩn toàn bộ nội dung bên dưới khi ở màn hình dọc để không làm giãn viewport */
  #app, #modal-root, #loading, #toast {
    display: none !important;
  }

  #orientation-overlay {
    display: flex !important;
  }
}

#orientation-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 99999999 !important;
  background: radial-gradient(circle at center, #1b3d35 0%, #0d211c 100%) !important;
  color: #fff9e9 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.orientation-card {
  max-width: 310px !important;
  width: calc(100% - 16px) !important;
  background: rgba(255, 249, 233, 0.08) !important;
  border: 1.5px solid rgba(236, 209, 147, 0.38) !important;
  border-radius: 18px !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;
  margin: auto !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(236, 209, 147, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.rotate-phone-anim {
  position: relative !important;
  width: 76px !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 2px 0 !important;
}

.phone-device {
  width: 36px !important;
  height: 60px !important;
  border: 2.5px solid #ecd193 !important;
  border-radius: 8px !important;
  background: #183e39 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  animation: phone-rotate 2.4s ease-in-out infinite !important;
  transform-origin: center center !important;
}

.phone-device::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  width: 10px !important;
  height: 2.5px !important;
  background: #ecd193 !important;
  border-radius: 2px !important;
}

.phone-screen-content {
  width: 26px !important;
  height: 46px !important;
  background: #254d44 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pokeball-mini {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid #ecd193 !important;
  position: relative !important;
  background: linear-gradient(to bottom, #d9534f 50%, #fbf5e2 50%) !important;
  box-shadow: 0 0 6px rgba(236, 209, 147, 0.5) !important;
}

.pokeball-mini::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 4px !important;
  height: 4px !important;
  background: #fff !important;
  border: 1.5px solid #233 !important;
  border-radius: 50% !important;
}

@keyframes phone-rotate {
  0%, 15% { transform: rotate(0deg); }
  45%, 75% { transform: rotate(90deg); }
  95%, 100% { transform: rotate(0deg); }
}

.rotate-arrows-svg {
  position: absolute !important;
  inset: -5px !important;
  width: 86px !important;
  height: 86px !important;
  pointer-events: none !important;
  animation: spin-arrows 8s linear infinite !important;
}

@keyframes spin-arrows {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orientation-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff4d1 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.25 !important;
}

.orientation-desc {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: #dce7dc !important;
  max-width: 280px !important;
}

.orientation-desc strong {
  color: #ecd193 !important;
}

.orientation-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  background: rgba(191, 209, 180, 0.15) !important;
  border: 1px dashed rgba(236, 209, 147, 0.4) !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  color: #e5edd8 !important;
}

.orientation-fullscreen-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #4f7b65 0%, #315a47 100%) !important;
  color: #fff9e9 !important;
  border: 1.5px solid #ecd193 !important;
  border-radius: 12px !important;
  padding: 7px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
  min-height: 34px !important;
}


/* --------------------------------------------------------------------------
   2. MOBILE LANDSCAPE LAYOUT ENGINE (Màn hình ngang <= 600px height)
   -------------------------------------------------------------------------- */
@media screen and (orientation: landscape) and (max-height: 600px) {
  html, body {
    height: 100dvh !important;
    width: 100dvw !important;
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    touch-action: manipulation;
  }

  /* ------------------------------------------------------------------------
     A. HOME / ATLAS SCREEN: GỌN GÀNG, HIỂN THỊ ĐỦ 6 LỘ TRÌNH TRÊN 1 MÀN HÌNH
     ------------------------------------------------------------------------ */
  .topbar {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    border-bottom-width: 2px !important;
  }

  .topbar .brand {
    font-size: 12.5px !important;
    flex: none !important;
    gap: 5px !important;
  }

  .topbar .brand img, .topbar .brand .icon {
    height: 16px !important;
    width: 16px !important;
    margin: 0 !important;
  }

  .topbar .brand small {
    display: none !important;
  }

  .topbar .nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 !important;
    justify-content: center !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .topbar .nav::-webkit-scrollbar {
    display: none !important;
  }

  .topbar .nav button {
    padding: 2px 7px !important;
    font-size: 10px !important;
    min-height: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    flex: none !important;
    box-shadow: none !important;
  }

  .topbar .nav button .icon {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
  }

  .topbar .wallet {
    padding: 2px 9px !important;
    height: 25px !important;
    min-height: 25px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    gap: 4px !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .topbar .wallet .icon {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
  }

  .topbar .wallet small {
    font-size: 7.5px !important;
    display: inline !important;
    margin-left: 3px !important;
  }

  .shell {
    height: calc(100dvh - 36px) !important;
    overflow-y: auto !important;
    padding: 5px 10px 12px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Thanh Doanh Trại gọn ngang 46px */
  .hero {
    min-height: 46px !important;
    max-height: 48px !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
    border-radius: 10px !important;
    display: block !important;
    border-width: 1.5px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  }

  .hero-copy {
    display: none !important;
  }

  .camp {
    min-height: 44px !important;
    height: 100% !important;
    width: 100% !important;
    padding: 3px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background-position: center 65% !important;
  }

  .camp-label {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .camp-label .icon {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px !important;
  }

  .camp-team {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    transform: none !important;
    overflow-x: auto !important;
  }

  .camp-pokemon {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255, 249, 233, 0.92) !important;
    padding: 2px 8px 2px 4px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(197, 188, 158, 0.85) !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }

  .camp-pokemon canvas {
    width: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    flex: none !important;
  }

  .camp-pokemon span {
    display: inline-block !important;
    background: none !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #2f4d41 !important;
  }

  /* Thanh chọn Vùng (Kanto, Johto, Hoenn...) nằm trên 1 hàng ngang */
  .section-head {
    margin: 0 0 5px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .section-head > div:first-child {
    display: none !important;
  }

  .section-head .regions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 3px 4px !important;
    border-radius: 10px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .section-head .regions::-webkit-scrollbar {
    display: none !important;
  }

  .section-head .region {
    flex: 1 0 auto !important;
    min-width: 0 !important;
    padding: 3px 8px !important;
    min-height: 24px !important;
    height: 24px !important;
    font-size: 10.5px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .section-head .region .icon {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
  }

  .section-head .region small {
    display: none !important;
  }

  /* Lưới 3 cột x 2 hàng cho 6 Tuyến Đường (vừa khít 100% trên màn hình) */
  .map-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }

  .map-card,
  .map-grid .map-card:last-child {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    padding: 6px !important;
    border-radius: 10px !important;
    gap: 7px !important;
    height: auto !important;
    min-height: 66px !important;
    box-shadow: 0 2px 0 rgba(179, 182, 155, 0.35) !important;
  }

  .map-card .map-preview,
  .map-grid .map-card:last-child .map-preview {
    width: 76px !important;
    height: 56px !important;
    flex: none !important;
    border-radius: 6px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  /* Nhãn TUYẾN ĐƯỜNG 01 đính gọn góc trên ảnh thu nhỏ, không chiếm cột riêng */
  .map-card .map-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    padding: 1.5px 4px !important;
    border-radius: 4px !important;
    background: rgba(255, 249, 233, 0.94) !important;
    color: #355447 !important;
    z-index: 2 !important;
    line-height: 1.1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  }

  .map-card .route-chip {
    display: none !important;
  }

  .map-card .map-body {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 2px !important;
    padding: 0 !important;
  }

  .map-card .map-body h3 {
    font-size: 11.5px !important;
    margin: 0 !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .map-card .map-body > p {
    display: none !important;
  }

  .map-card .map-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .map-card .diamonds {
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }

  .map-card .map-meta > span:last-child {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .map-card .route-stars {
    gap: 1px !important;
  }

  .map-card .route-stars .icon {
    width: 11px !important;
    height: 11px !important;
    margin: 0 !important;
  }

  .map-card .map-meta small {
    font-size: 8px !important;
  }

  .map-card .route-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    align-items: center !important;
    margin-top: 2px !important;
    width: 100% !important;
  }

  .map-card .route-actions .lock-hint {
    display: none !important;
  }

  .map-card .route-actions button.ghost {
    flex: 0 0 auto !important;
    min-width: 32px !important;
    width: auto !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .map-card .route-actions button.primary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 6px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
  }

  .map-card .route-actions button.primary .icon {
    width: 11px !important;
    height: 11px !important;
    margin: 0 !important;
    flex: none !important;
  }

  .home-footer {
    margin-top: 8px !important;
    padding-top: 4px !important;
    font-size: 9.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .home-footer button {
    min-height: 22px !important;
    padding: 2px 7px !important;
    font-size: 9.5px !important;
  }

  /* ------------------------------------------------------------------------
     B. BATTLE SCREEN: BỐ CỤC 2 CỘT CÂN ĐỐI, KHÔNG ĐÈ NHAU
     ------------------------------------------------------------------------ */
  .in-battle .battle-page {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    width: 100dvw !important;
    padding: env(safe-area-inset-top, 3px) env(safe-area-inset-right, 4px) env(safe-area-inset-bottom, 3px) env(safe-area-inset-left, 4px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #e8ecd7 !important;
  }

  .in-battle .battle-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(230px, 30vw, 262px) !important;
    grid-template-rows: 100% !important;
    gap: 5px !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  .in-battle .battle-layout > div:first-child {
    position: relative !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: none !important;
  }

  /* HUD VIÊN THUỐC GÓC TRÁI TRÊN */
  .in-battle .battle-head {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    right: auto !important;
    max-width: calc(100% - 10px) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 9px !important;
    background: rgba(255, 249, 233, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(169, 180, 155, 0.85) !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
    width: auto !important;
    height: 28px !important;
    pointer-events: auto !important;
  }

  .in-battle .battle-title {
    display: none !important;
  }

  .in-battle .hud {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .in-battle .stat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    min-width: 0 !important;
    font-size: 12px !important;
    color: #385b51 !important;
    box-shadow: none !important;
  }

  .in-battle .stat small {
    display: none !important;
  }

  .in-battle .stat .icon {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
  }

  .in-battle .stat b {
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .in-battle .battle-head .inline {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 3px !important;
    border-left: 1px solid #d4dec4 !important;
    padding-left: 4px !important;
  }

  .in-battle .battle-head .inline button {
    padding: 2px 7px !important;
    min-height: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    background: #f7eed7 !important;
    box-shadow: none !important;
  }

  .in-battle .battle-head .inline button .icon {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
  }

  .in-battle .board-shell {
    position: relative !important;
    inset: auto !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #dfe5ce !important;
    overflow: hidden !important;
  }

  .in-battle .board {
    object-fit: contain !important;
    aspect-ratio: 920 / 640 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  }

  .in-battle .note,
  .in-battle #battle-note {
    display: none !important;
  }

  /* SIDEBAR ĐIỀU KHIỂN BÊN PHẢI */
  .in-battle .battle-side {
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 5px 6px !important;
    gap: 3px !important;
    background: #fff9e9 !important;
    border: 1.5px solid #c9b383 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(64, 93, 81, 0.15) !important;
  }

  .in-battle .board-toolbar {
    position: static !important;
    display: flex !important;
    gap: 3px !important;
    margin: 0 !important;
    flex: none !important;
  }

  .in-battle .board-toolbar button {
    flex: 1 !important;
    min-height: 25px !important;
    height: 25px !important;
    padding: 2px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    background: #f3ecd7 !important;
    box-shadow: none !important;
  }

  .in-battle .palette-tabs {
    display: flex !important;
    gap: 3px !important;
    flex: none !important;
    margin: 0 !important;
  }

  .in-battle .palette-tabs button {
    flex: 1 !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 1px 4px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
  }

  .in-battle .team-grid[hidden],
  .in-battle .support-grid[hidden] {
    display: none !important;
  }

  .in-battle .team-grid:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    flex: none !important;
    margin: 0 !important;
  }

  .in-battle .team-button {
    min-height: 52px !important;
    max-height: 56px !important;
    padding: 3px 2px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    box-shadow: none !important;
    border-width: 1.5px !important;
    background: #fbf6e8 !important;
  }

  .in-battle .team-button canvas {
    width: 26px !important;
    height: 26px !important;
    image-rendering: pixelated !important;
  }

  .in-battle .team-button span {
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 96% !important;
  }

  .in-battle .team-button b {
    font-size: 8.5px !important;
    color: #4a7458 !important;
    line-height: 1 !important;
  }

  .in-battle .support-grid:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    flex: none !important;
    margin: 0 !important;
  }

  .in-battle .support-button {
    min-height: 48px !important;
    max-height: 54px !important;
    padding: 2px !important;
    font-size: 8.5px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  .in-battle .support-button .support-sprite {
    width: 22px !important;
    height: 22px !important;
  }

  /* Bảng chi tiết nâng cấp khi chọn Pokémon trên bản đồ */
  .in-battle:not(.has-selection) .battle-side .details:not(:has([data-action="cancel-buy"])) {
    display: none !important;
  }

  .in-battle .battle-side .details:has([data-action="cancel-buy"]) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 3px !important;
    gap: 2px !important;
  }

  .in-battle .battle-side:has([data-action="cancel-buy"]) .team-grid {
    display: none !important;
  }

  .in-battle .battle-side .details:has([data-action="cancel-buy"]) h3 {
    font-size: 11.5px !important;
    margin: 0 !important;
  }

  .in-battle .battle-side .details:has([data-action="cancel-buy"]) p {
    font-size: 9px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
  }

  .in-battle .battle-side .details:has([data-action="cancel-buy"]) .notice {
    font-size: 8.5px !important;
    padding: 3px 5px !important;
    margin: 1px 0 !important;
  }

  .in-battle .battle-side .details:has([data-action="cancel-buy"]) [data-action="cancel-buy"] {
    margin-top: 2px !important;
    min-height: 25px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
  }

  .in-battle .has-selection .team-grid,
  .in-battle .has-selection .palette-tabs,
  .in-battle .has-selection .support-grid,
  .in-battle .has-selection .board-toolbar {
    display: none !important;
  }

  .in-battle .has-selection .details {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 3px !important;
  }

  .in-battle .mobile-back {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #e6dfc9 !important;
    color: #385b51 !important;
    border: 1px solid #c9b383 !important;
    margin: 0 !important;
  }

  .in-battle .guardian-heading {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 6px !important;
    margin: 0 !important;
    min-height: 32px !important;
    border-radius: 7px !important;
    background: #f1ebd8 !important;
  }

  .in-battle .guardian-heading canvas {
    width: 26px !important;
    height: 26px !important;
  }

  .in-battle .guardian-heading h3 {
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  .in-battle .guardian-heading .eyebrow,
  .in-battle .mastery-label {
    display: none !important;
  }

  .in-battle .upgrade-tabs {
    display: flex !important;
    gap: 3px !important;
    margin: 0 !important;
  }

  .in-battle .upgrade-tabs button {
    flex: 1 !important;
    min-height: 22px !important;
    height: 22px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 1px !important;
    border-radius: 6px !important;
  }

  .in-battle .upgrade-page:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px !important;
  }

  .in-battle .upgrade-page button {
    min-height: 32px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
    border-radius: 7px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    box-shadow: none !important;
  }

  .in-battle .upgrade-page button small {
    display: none !important;
  }

  /* Cụm nút điều khiển Đợt quái */
  .in-battle .battle-controls {
    position: static !important;
    margin-top: auto !important;
    padding: 4px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: none !important;
    background: none !important;
    border-top: 1px dashed #d8cfb7 !important;
  }

  .in-battle .battle-controls > p,
  .in-battle .battle-controls .muted {
    display: none !important;
  }

  .in-battle #wave-button {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 6px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #4f7b65 0%, #315a47 100%) !important;
    color: #fff9e9 !important;
    border: 1.5px solid #234536 !important;
    box-shadow: 0 2px 0 #1b382b !important;
  }

  .in-battle .sub-controls-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px !important;
  }

  .in-battle #auto-wave-button,
  .in-battle #early-wave-button,
  .in-battle #preview-button,
  .in-battle #pulse-button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
  }

  .in-battle .progress-bar {
    display: block !important;
    height: 3px !important;
    background: #e3dbcb !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .in-battle #wave-progress {
    height: 100% !important;
    background: #4f7b65 !important;
  }

  /* Pause veil: Chỉ hiển thị khi KHÔNG có class .hidden */
  .in-battle #pause-veil.hidden {
    display: none !important;
  }

  .in-battle #pause-veil:not(.hidden) {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18, 38, 32, 0.78) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 50 !important;
  }

  .in-battle #pause-veil > div {
    background: #fff9e9 !important;
    border: 2px solid #ecd193 !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    max-width: 270px !important;
    width: 85% !important;
  }

  .in-battle #pause-veil h1 {
    font-size: 15px !important;
    margin: 0 0 4px !important;
    color: #385b51 !important;
  }

  .in-battle #pause-veil button {
    width: 100% !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }


  /* ------------------------------------------------------------------------
     C. MODALS (Tiệm Eli, Đội Hình, Cài Đặt, Cẩm Nang, Sổ Tay, Gachapon)
     ------------------------------------------------------------------------ */
  .modal-backdrop {
    padding: 6px !important;
  }

  .modal,
  .compact-sheet,
  .crayon-book {
    position: fixed !important;
    inset: 6px !important;
    width: calc(100vw - 12px) !important;
    max-width: 820px !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    margin: auto !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  }

  .modal-head,
  .compact-sheet .modal-head,
  .crayon-book .modal-head {
    flex: 0 0 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .modal-head h2,
  .compact-sheet .modal-head h2,
  .crayon-book .modal-head h2 {
    font-size: 14.5px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Nút đóng (×) tròn gọn 26x26, không có vòng tròn vàng khổng lồ */
  .modal-head button[data-action="close"],
  .compact-sheet .modal-head button,
  .crayon-book .modal-head button {
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-shadow: none !important;
    background: #efe8d2 !important;
    border: 1px solid #cbbd9c !important;
  }

  .modal-body,
  .compact-sheet .modal-body,
  .crayon-book .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 8px 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-foot,
  .compact-sheet .modal-foot,
  .crayon-book .modal-foot {
    flex: 0 0 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 4px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .modal-foot button,
  .compact-sheet .modal-foot button {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    flex: 0 0 auto !important;
    box-shadow: none !important;
  }

  /* 1. Modal Đội hình (Bạn đồng hành - .scroll-team) */
  .scroll-team .modal-body > p {
    font-size: 10.5px !important;
    margin: 0 0 4px 0 !important;
  }

  .scroll-team .slot-panel {
    padding: 5px 10px !important;
    margin: 0 0 6px 0 !important;
    border-radius: 10px !important;
    min-height: 0 !important;
  }

  .scroll-team .slot-panel h3 {
    font-size: 12.5px !important;
    margin: 0 !important;
  }

  .scroll-team .slot-panel button {
    min-height: 25px !important;
    height: 25px !important;
    padding: 2px 10px !important;
    font-size: 10.5px !important;
    border-radius: 7px !important;
  }

  .scroll-team .collection {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .scroll-team .poke-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    padding: 8px !important;
    min-height: 0 !important;
    gap: 3px !important;
    border-radius: 11px !important;
  }

  .scroll-team .poke-card canvas {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
  }

  .scroll-team .poke-card h3 {
    font-size: 12.5px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .scroll-team .poke-card p {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .scroll-team .poke-card button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 25px !important;
    height: 25px !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    margin-top: 4px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
  }

  /* 2. Modal Cửa hàng (Tiệm Eli - .shop-sheet) */
  .shop-sheet > .between {
    position: absolute !important;
    right: 46px !important;
    top: 5px !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  .shop-sheet .wallet {
    height: 26px !important;
    min-height: 26px !important;
    padding: 2px 10px !important;
    font-size: 13px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .shop-sheet .wallet .icon {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
  }

  .shop-sheet .tabs,
  .compact-sheet.scroll-shop .shop-sheet .tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 6px 0 !important;
  }

  .shop-sheet .tabs button,
  .compact-sheet.scroll-shop .shop-sheet .tabs button {
    min-width: 0 !important;
    min-height: 23px !important;
    height: 23px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
  }

  .shop-sheet .collection:not(.support-shop),
  .compact-sheet.scroll-shop .shop-sheet .collection:not(.support-shop) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .shop-sheet .poke-card,
  .compact-sheet.scroll-shop .shop-sheet .poke-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    padding: 6px !important;
    min-height: 0 !important;
    gap: 2px !important;
    border-radius: 10px !important;
  }

  .shop-sheet .poke-card canvas,
  .compact-sheet.scroll-shop .shop-sheet .poke-card canvas {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
  }

  .shop-sheet .poke-card h3,
  .compact-sheet.scroll-shop .shop-sheet .poke-card h3 {
    font-size: 12px !important;
    margin: 0 !important;
  }

  .shop-sheet .poke-card p:first-of-type {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .shop-sheet .poke-card p:nth-of-type(2) {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .shop-sheet .poke-card .tag {
    font-size: 9.5px !important;
    padding: 1px 6px !important;
    margin: 1px 0 !important;
  }

  .shop-sheet .poke-card button,
  .compact-sheet.scroll-shop .shop-sheet .poke-card button {
    width: 100% !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    margin-top: 2px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  /* 3. Modal Cài đặt (Doanh trại của bạn) */
  .compact-sheet .upgrade-tabs {
    margin-bottom: 6px !important;
    gap: 4px !important;
  }

  .compact-sheet .upgrade-tabs button {
    min-height: 25px !important;
    height: 25px !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    border-radius: 7px !important;
  }

  .compact-sheet .settings-row {
    padding: 4px 0 !important;
    font-size: 11px !important;
  }

  .compact-sheet .settings-row label {
    font-size: 11px !important;
  }

  .compact-sheet .settings-row button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 9px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
  }

  /* 4. Modal Cẩm nang chiến thuật (Guide) */
  .compact-sheet .modal-body > button.gold {
    min-height: 26px !important;
    height: 26px !important;
    padding: 2px 12px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    margin-bottom: 5px !important;
  }

  .compact-sheet .tabs {
    gap: 4px !important;
    margin: 0 0 6px 0 !important;
  }

  .compact-sheet .tabs button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 9px !important;
    font-size: 10.5px !important;
    border-radius: 7px !important;
  }

  .compact-sheet .rules-grid {
    gap: 8px !important;
  }

  .compact-sheet .rule {
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  .compact-sheet .rule h3 {
    font-size: 13px !important;
    margin: 0 !important;
  }

  .compact-sheet .rule p {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
  }

  /* 5. Modal Chuẩn bị thám hiểm (Expedition Setup) */
  .expedition-sheet .setup-grid {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .expedition-sheet .setup-image {
    max-height: 110px !important;
    border-radius: 10px !important;
  }

  .expedition-sheet .setup-grid h2 {
    font-size: 15px !important;
    margin-top: 4px !important;
  }

  .expedition-sheet .setup-grid p.muted {
    font-size: 10px !important;
    line-height: 1.25 !important;
    margin: 2px 0 !important;
  }

  .expedition-sheet .mode-hint {
    font-size: 10px !important;
    margin: 2px 0 4px !important;
  }

  .expedition-sheet .setup-grid .choices:last-of-type .choice {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .expedition-sheet .setup-grid .choices:last-of-type .difficulty-name {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* 6. Modal Sổ tay tân thủ (.crayon-book) */
  .crayon-book .lesson-nav {
    height: 100% !important;
  }

  .crayon-book .lesson-nav button {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
}

/* ==========================================================================
   6. GIAO DIỆN HƯỚNG DẪN THÊM VÀO MÀN HÌNH CHÍNH (PWA INSTALL GUIDE)
   ========================================================================== */
.pwa-install-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-install-guide .pwa-lead {
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #35584b !important;
  margin: 0 !important;
}

.pwa-install-guide .pwa-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pwa-install-guide .pwa-step-card {
  background: #fffdf6;
  border: 1.5px solid #d4cbb4;
  border-radius: 12px;
  padding: 8px 10px;
}

.pwa-install-guide .pwa-step-card h3 {
  font-size: 13px !important;
  color: #285c4e !important;
  margin: 0 0 4px 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

.pwa-install-guide .pwa-step-card ol {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  line-height: 1.35;
  color: #405d51;
}

.pwa-install-guide .pwa-step-card li {
  margin-bottom: 3px;
}

.pwa-install-guide .economy-note {
  margin: 0 !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

/* ==========================================================================
   7. GIAO DIỆN WEB / DESKTOP TINH GỌN (WIDTH >= 1001px & HEIGHT >= 601px)
   Vừa khít 1 màn hình, hiện đại, đồng bộ với bản Mobile Landscape
   ========================================================================== */
@media screen and (min-width: 1001px) and (min-height: 601px) {
  html, body {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  /* 7.1. Thanh Topbar & Màn hình chính (Home Atlas) trên Web */
  .topbar {
    height: 52px !important;
    padding: 0 24px !important;
    gap: 14px !important;
  }

  .topbar .brand {
    font-size: 19px !important;
    gap: 8px !important;
  }

  .topbar .brand .icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }

  .topbar .brand small {
    display: none !important;
  }

  .topbar .nav {
    display: flex !important;
    gap: 6px !important;
  }

  .topbar .nav button {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .topbar .nav button .icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  .topbar .wallet {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .topbar .wallet small {
    display: none !important;
  }

  .topbar .wallet .icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  .shell {
    max-width: 1480px !important;
    height: calc(100dvh - 52px) !important;
    padding: 10px 24px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .hero {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    min-height: 76px !important;
    max-height: 82px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }

  .hero-copy {
    padding: 6px 14px !important;
  }

  .hero-copy img {
    height: 58px !important;
    max-width: 180px !important;
    object-fit: contain !important;
  }

  .hero-copy .eyebrow {
    display: none !important;
  }

  .camp {
    padding: 6px 16px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .camp-label {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .camp-label .icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  .camp-team {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    transform: none !important;
  }

  .camp-pokemon {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255, 249, 233, 0.9) !important;
    padding: 3px 9px 3px 5px !important;
    border-radius: 10px !important;
    border: 1px solid #d4cbb3 !important;
  }

  .camp-pokemon canvas {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  .camp-pokemon span {
    font-size: 11px !important;
    font-weight: 700 !important;
    background: none !important;
    padding: 0 !important;
  }

  .section-head {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
  }

  .section-head h2 {
    font-size: 20px !important;
    white-space: nowrap !important;
  }

  .section-head p {
    display: none !important;
  }

  .regions {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    gap: 5px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
  }

  .regions .region {
    flex: 0 0 auto !important;
    min-width: 78px !important;
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    border-radius: 9px !important;
    text-align: center !important;
  }

  .regions .region small {
    font-size: 9px !important;
  }

  /* Lưới 6 tuyến đường 3x2 nằm ngang vừa khít màn hình Web */
  .map-grid {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .map-card {
    display: grid !important;
    grid-template-columns: 155px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .map-preview {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  .map-badge {
    top: 6px !important;
    left: 6px !important;
    padding: 3px 7px !important;
    font-size: 9.5px !important;
    border-radius: 6px !important;
  }

  .map-card .map-body {
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .map-card .route-chip {
    min-height: 0 !important;
    padding: 2px 7px !important;
    font-size: 9.5px !important;
    align-self: flex-start !important;
  }

  .map-card .map-body h3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    min-height: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .map-card .map-body > p {
    font-size: 11px !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .map-card .map-meta {
    min-height: 0 !important;
    font-size: 10.5px !important;
    margin: 0 !important;
  }

  .map-card .route-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: auto !important;
  }

  .map-card .route-actions .lock-hint {
    order: -1 !important;
    width: 100% !important;
    min-height: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .map-card .route-actions .lock-hint .icon {
    width: 13px !important;
    height: 13px !important;
  }

  .map-card .route-actions button {
    flex: 1 1 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .map-card .route-actions button .icon {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
  }

  .home-footer {
    margin: 0 !important;
    height: 24px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  /* 7.2. Màn hình Chiến đấu (Battle Screen) trên Web */
  .in-battle .battle-page {
    height: 100dvh !important;
    max-width: 1600px !important;
    padding: 8px 18px 10px !important;
    gap: 8px !important;
  }

  .in-battle .battle-head {
    padding: 0 !important;
    min-height: 40px !important;
  }

  .in-battle .battle-title h2 {
    font-size: 20px !important;
    display: inline !important;
    margin-right: 8px !important;
  }

  .in-battle .battle-title .eyebrow {
    font-size: 10px !important;
    margin-right: 8px !important;
  }

  .in-battle .hud {
    gap: 8px !important;
  }

  .in-battle .stat {
    min-width: 0 !important;
    padding: 5px 12px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .in-battle .stat small {
    margin: 0 !important;
    font-size: 9px !important;
  }

  .in-battle .stat .icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  .in-battle .stat b {
    font-size: 18px !important;
  }

  .in-battle .battle-layout {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 14px !important;
  }

  .in-battle .battle-side {
    padding: 10px 12px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }

  .in-battle .board-toolbar button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }

  .in-battle .palette-tabs button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }

  .in-battle .team-button {
    min-height: 64px !important;
    padding: 4px !important;
    border-radius: 10px !important;
  }

  .in-battle .team-button canvas {
    width: 34px !important;
    height: 34px !important;
  }

  .in-battle .details {
    background: #f6f1e1 !important;
    border: 1px solid #dfd6be !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
  }

  .in-battle .details h3 {
    font-size: 15px !important;
  }

  .in-battle .details p,
  .in-battle .details .notice {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
  }

  .in-battle .battle-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: auto !important;
  }

  .in-battle #wave-button {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .in-battle .sub-controls-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .in-battle .sub-controls-row button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 6px !important;
    font-size: 10.5px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .in-battle .sub-controls-row #preview-button {
    grid-column: auto !important;
  }

  /* 7.3. Các hộp thoại Modal trên Web (.modal, .compact-sheet) */
  .modal,
  .compact-sheet {
    width: min(940px, 92vw) !important;
    max-width: 940px !important;
    max-height: 86dvh !important;
    border-radius: 20px !important;
    position: relative !important;
  }

  .modal-head {
    padding: 12px 20px !important;
    min-height: 48px !important;
    position: relative !important;
  }

  .modal-head h2 {
    font-size: 20px !important;
  }

  .modal-head button[aria-label="Cerrar"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
  }

  .modal-body {
    padding: 14px 20px !important;
  }

  .modal-foot {
    padding: 10px 20px !important;
  }

  .modal-foot button {
    min-height: 36px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
  }

  /* Cửa hàng & Đội hình trên Web */
  .shop-sheet > .between {
    position: absolute !important;
    top: 9px !important;
    right: 64px !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  .shop-sheet > .between .wallet {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border-radius: 15px !important;
  }

  .shop-sheet > .between .wallet small {
    display: none !important;
  }

  .shop-sheet > .between .wallet .icon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 4px !important;
  }

  .shop-sheet .collection:not(.support-shop) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .scroll-team .collection {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .scroll-team .poke-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 10px !important;
    min-height: 0 !important;
    gap: 4px !important;
  }

  .scroll-team .poke-card canvas {
    width: 56px !important;
    height: 56px !important;
  }

  .scroll-team .poke-card h3 {
    font-size: 15px !important;
    text-align: center !important;
  }

  .scroll-team .poke-card p {
    font-size: 11px !important;
    text-align: center !important;
  }

  .scroll-team .poke-card button {
    width: 100% !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    margin-top: auto !important;
  }

  /* Cài đặt trên Web */
  .compact-sheet .settings-row {
    padding: 8px 0 !important;
    font-size: 13px !important;
  }

  .compact-sheet .settings-row button {
    min-height: 30px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
  }

  /* Chuẩn bị chuyến thám hiểm trên Web (.expedition-sheet) */
  .expedition-sheet .setup-grid {
    grid-template-columns: 310px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .expedition-sheet .setup-image {
    max-height: 185px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  .expedition-sheet .setup-grid h2 {
    font-size: 20px !important;
    margin: 6px 0 2px !important;
  }

  .expedition-sheet .setup-grid .choices {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 6px 0 10px !important;
  }

  .expedition-sheet .setup-grid .choices:last-of-type {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .expedition-sheet .setup-grid .choices:last-of-type .choice {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .expedition-sheet .setup-grid .choices:last-of-type .difficulty-name {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .expedition-sheet .choice {
    padding: 7px 10px !important;
    min-height: 44px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }

  .expedition-sheet .choice small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

/* ==========================================================================
   8. TĂNG ĐỘ NÉT POKÉMON HD (4x EPX SUPER-RESOLUTION & 2x HiDPI CANVAS)
   Loại bỏ răng cưa khi thu nhỏ canvas và tăng độ tương phản/sắc nét cho sprite
   ========================================================================== */
canvas[data-sprite],
.poke-card canvas,
.team-button canvas,
.camp-pokemon canvas,
.selected-portrait,
.encounter-card canvas,
.gacha-result canvas,
.gacha-roster canvas,
.eevee-option canvas,
.rule canvas,
.mega-cell canvas,
.lesson-sprites canvas {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 1.5px 1.5px rgba(22, 50, 42, 0.24)) contrast(1.06) saturate(1.08) !important;
}

.board {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: auto !important;
}