/* ========================================
   main.css — 暗区突围保险箱搜索界面
   仅负责：布局、颜色、字体、尺寸、边框、阴影
   禁止写动画
   ======================================== */

/* ---------- 基础重置与全局 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #0a0a0a;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}

/* ---------- 主窗口 ---------- */
.window {
  width: 428px;
  margin-top: 20px;
  background: linear-gradient(180deg, #1a1a1e 0%, #111114 100%);
  border: 1px solid #3a3a3e;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 2px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: visible;
}

/* ---------- 标题栏 ---------- */
.title-bar {
  height: 40px;
  background: linear-gradient(90deg, #2a2a2e 0%, #1e1e22 100%);
  border-bottom: 1px solid #3a3a3e;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.title-bar h1 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* 返回按钮 */
.back-btn {
  position: fixed;
  left: 10px;
  top: 8px;
  z-index: 100;
  height: 32px;
  min-width: 50px;
  padding: 0 14px;
  background: linear-gradient(180deg, #4a4a4e 0%, #3a3a3e 100%);
  border: 2px solid #8a6a3a;
  border-radius: 6px;
  color: #e8c080;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: all 0.15s;
  outline: none;
}

.back-btn:hover {
  background: linear-gradient(180deg, #5a5a5e 0%, #4a4a4e 100%);
  border-color: #daa03a;
  color: #fff;
}

/* 标题栏内的返回按钮（safebox/elec 页面已改用 top-bar） */
.title-bar .back-btn,
.title-back-btn {
  display: none;
}

/* 顶部固定栏（box/market 风格） */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--sat, 0px) + 10px) 16px 10px;
  background: transparent;
  border-bottom: none;
}
.top-bar .back-btn {
  background: #1e1e22;
  border: 1px solid #4a4a4e;
  color: #c0c0c0;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  outline: none;
}
.top-bar .back-btn:hover {
  background: #2a2a2e;
  border-color: #6a6a6e;
  color: #e0e0e0;
}
.top-bar .back-btn:active {
  transform: scale(0.95);
}

/* ---------- 顶部标签栏 ---------- */
.tab-bar {
  height: 36px;
  background: #16161a;
  border-bottom: 1px solid #2a2a2e;
  display: flex;
  align-items: stretch;
  padding: 4px 10px;
  gap: 6px;
}

.tab-btn {
  height: 28px;
  padding: 0 16px;
  border: 1px solid #3a3a3e;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}

.tab-btn.active {
  background: linear-gradient(180deg, #5a3825 0%, #3d2518 100%);
  border-color: #c4823a;
  color: #f0d0a0;
  box-shadow: 0 0 6px rgba(196, 130, 58, 0.3);
}

.tab-btn.inactive {
  background: linear-gradient(180deg, #3a3a3e 0%, #2a2a2e 100%);
  border-color: #555558;
  color: #c0c0c0;
}

.tab-btn.inactive:hover {
  background: linear-gradient(180deg, #4a4a4e 0%, #3a3a3e 100%);
  border-color: #666668;
}

.tab-btn.pause-btn {
  background: linear-gradient(180deg, #3a3a3e 0%, #2a2a2e 100%);
  border-color: #555558;
  color: #c0c0c0;
}

.tab-btn.pause-btn.paused {
  background: linear-gradient(180deg, #4a3020 0%, #3a2518 100%);
  border-color: #c4823a;
  color: #f0d0a0;
}

.search-container-tab {
  margin-left: auto;
  background: none;
  border: none;
  cursor: default;
  padding: 0 8px;
  color: #e8a040;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
}

.search-container-tab.visible {
  opacity: 1;
  pointer-events: auto;
}

.search-container-tab .timer-value {
  font-variant-numeric: tabular-nums;
  color: #e8a040;
  font-size: 13px;
}

/* ---------- 搜索中央指示器 ---------- */
.search-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 20;
  pointer-events: none;
}

.search-indicator .searching-text {
  font-size: 12px;
  color: #e8a040;
  font-weight: 500;
  margin-bottom: 2px;
}

.search-indicator .searching-timer {
  font-size: 14px;
  font-weight: 600;
  color: #e8a040;
  font-variant-numeric: tabular-nums;
}

.search-indicator.hidden {
  display: none;
}

/* ---------- 保险箱网格 ---------- */
.safebox-container {
  padding: 12px;
  position: relative;
}

.safebox-grid {
  display: grid;
  grid-template-columns: repeat(5, 80px);
  grid-template-rows: repeat(6, 80px);
  gap: 0;
  background: #1a1a1e;
  border: 1px solid #3a3a3e;
  border-radius: 3px;
  position: relative;
}

/* 初始占位提示 */
.grid-placeholder {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-text {
  font-size: 13px;
  color: #555558;
  letter-spacing: 1px;
}

/* ---------- 格子 ---------- */
.grid-cell {
  width: 80px;
  height: 80px;
  background: #1e1e22;
  border: 1px solid #3a3a3e;
  position: relative;
  overflow: hidden;
}

.grid-cell.empty {
  background: #1e1e22;
}

.grid-cell.empty.empty-visible {
  background: #1e1e22;
}

/* ---------- 物品 ---------- */
.item {
  border: 1px solid #444448;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

/* 未搜索状态：统一灰色外观，不展示品质颜色 */
.item:not(.searched) {
  background: linear-gradient(180deg, #2a2a2e 0%, #222226 100%) !important;
  border-color: #444448 !important;
  box-shadow: none !important;
}

/* 品质背景颜色（仅在已搜索后生效） — 半透明让格子可见 */
.item.quality-white {
  background: linear-gradient(180deg, rgba(42,42,46,0.5) 0%, rgba(34,34,38,0.5) 100%);
  border-color: #555558;
}

.item.quality-green {
  background: linear-gradient(180deg, rgba(26,46,26,0.5) 0%, rgba(20,34,20,0.5) 100%);
  border-color: #3a8a3a;
  box-shadow: inset 0 0 12px rgba(58, 138, 58, 0.15);
}

.item.quality-blue {
  background: linear-gradient(180deg, rgba(26,26,62,0.5) 0%, rgba(20,20,48,0.5) 100%);
  border-color: #3a5aaa;
  box-shadow: inset 0 0 12px rgba(58, 90, 170, 0.15);
}

.item.quality-purple {
  background: linear-gradient(180deg, rgba(46,26,62,0.5) 0%, rgba(34,20,48,0.5) 100%);
  border-color: #8a3aaa;
  box-shadow: inset 0 0 12px rgba(138, 58, 170, 0.15);
}

.item.quality-gold {
  background: linear-gradient(180deg, rgba(62,46,26,0.5) 0%, rgba(48,34,20,0.5) 100%);
  border-color: #c49a3a;
  box-shadow: inset 0 0 12px rgba(196, 154, 58, 0.2);
}

.item.quality-red {
  background: linear-gradient(180deg, rgba(62,26,26,0.5) 0%, rgba(48,20,20,0.5) 100%);
  border-color: #c43a3a;
  box-shadow: inset 0 0 12px rgba(196, 58, 58, 0.2);
}

/* 物品图标 */
.item-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.item-icon img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  pointer-events: none;
}

/* 物品名称 — 右上角右对齐 */
.item-name {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  color: #ffffff;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 6;
}

.item.searched .item-name {
  opacity: 1;
}

/* 物品数量 — 右下角右对齐（1省略） */
.item-quantity {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  color: #e8e0d0;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  font-variant-numeric: tabular-nums;
  z-index: 6;
}

.item.searched .item-quantity {
  opacity: 1;
}

/* 物品操作标记 — 左下角（柯恩币除外） */
.item-action {
  position: absolute;
  bottom: 2px;
  left: 3px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  object-fit: contain;
}

.item.searched .item-action {
  opacity: 1;
}

/* ---------- 未搜索遮罩 ---------- */
.item-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    #2a2a2e,
    #2a2a2e 4px,
    #333338 4px,
    #333338 8px
  );
  z-index: 5;
  pointer-events: none;
}

.item-mask.hidden {
  display: none;
}

/* ---------- 放大镜 ---------- */
.magnifying-glass {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.magnifying-glass.visible {
  opacity: 1;
}

.magnifying-glass svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

/* ---------- 详情面板 ---------- */
.detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.detail-overlay.visible {
  display: flex;
}

.detail-panel {
  width: 340px;
  background: linear-gradient(180deg, #1e1e22 0%, #16161a 100%);
  border: 1px solid #4a4a4e;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  padding: 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #333338;
}

.detail-icon-wrap {
  width: 64px;
  height: 64px;
  background: #1a1a1e;
  border: 1px solid #3a3a3e;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail-icon-wrap img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.detail-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.detail-quality {
  font-size: 12px;
  font-weight: 500;
}

.detail-quality.quality-white { color: #aaaaaa; }
.detail-quality.quality-green { color: #58c85a; }
.detail-quality.quality-blue { color: #5a8aff; }
.detail-quality.quality-purple { color: #c060ff; }
.detail-quality.quality-gold { color: #e8c040; }
.detail-quality.quality-red { color: #ff5050; }

.detail-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #1a1a1e;
  border: 1px solid #2a2a2e;
  border-radius: 3px;
}

.detail-label {
  font-size: 12px;
  color: #888888;
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  color: #e0e0e0;
}

.detail-desc-row {
  padding: 10px;
  background: #1a1a1e;
  border: 1px solid #2a2a2e;
  border-radius: 3px;
}

.detail-description {
  font-size: 12px;
  color: #a0a0a8;
  line-height: 1.6;
}

.detail-close {
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #4a4a4e 0%, #3a3a3e 100%);
  border: 1px solid #555558;
  border-radius: 3px;
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.detail-close:hover {
  background: linear-gradient(180deg, #5a5a5e 0%, #4a4a4e 100%);
  border-color: #666668;
}

/* ---------- 全局 Toast 提示 ---------- */
.toast-tip {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(220, 220, 220, 0.7);
  color: #111;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 15px;
  z-index: 999999;
  display: none;
  white-space: nowrap;
}

/* ---------- 本局大金提示窗口 ---------- */
.bp-hint {
  touch-action: none;
  position: fixed;
  top: 60px;
  right: 12px;
  width: 220px;
  z-index: 99990;
  display: none;
}
.bp-hint.show { display: block; }
.bp-hint-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(30,30,34,.82) 0%, rgba(21,21,24,.82) 100%);
  border: 1px solid rgba(136,136,136,.35);
  border-radius: 8px 8px 0 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 10px;
}
.bp-hint-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}
.bp-hint-text {
  flex: 1;
  font-size: 14px;
  color: #e0e0e0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
.bp-hint-text .bp-name { color: #ff8c2a; font-weight: 600; }
.bp-hint-text .bp-box { color: #ff8c2a; font-weight: 600; }
.bp-hint-toggle {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 16px;
  transition: transform .2s;
}
.bp-hint-toggle.collapsed { transform: rotate(-90deg); }
.bp-hint-imgbox {
  background: rgba(14,14,16,.65);
  border: 1px solid rgba(136,136,136,.3);
  border-top: none;
  border-radius: 0 0 8px 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  aspect-ratio: 21.5 / 9;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-hint-imgbox::before,
.bp-hint-imgbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bp-hint-imgbox::before {
  background: linear-gradient(to top right, transparent 49.5%, rgba(51,51,51,.55) 49.5%, rgba(51,51,51,.55) 50.5%, transparent 50.5%);
}
.bp-hint-imgbox::after {
  background: linear-gradient(to bottom right, transparent 49.5%, rgba(51,51,51,.55) 49.5%, rgba(51,51,51,.55) 50.5%, transparent 50.5%);
}
.bp-hint-imgbox img {
  max-width: 70%;
  max-height: 80%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.bp-hint.collapsed .bp-hint-imgbox { display: none; }
.bp-hint.collapsed .bp-hint-bar { border-radius: 8px; }

/* ========================================
   横屏背包分屏样式
   ======================================== */

/* 页面可滚动，禁用橡皮筋效果 */
body {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* 保险箱区标题：默认（竖屏）隐藏，仅横屏/电脑端显示 */
.safebox-heading {
  display: none;
}

/* 主分屏容器：默认竖屏上下排列（保险箱在上，背包在下） */
.main-split {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 保险箱侧 */
.safebox-side {
  order: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ---------- 背包面板 ---------- */
.backpack-panel {
  order: 2;
  margin-top: 10px;
  background: linear-gradient(180deg, #16161a 0%, #111114 100%);
  border: 1px solid #3a3a3e;
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.backpack-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
}

.backpack-title {
  font-size: 13px;
  font-weight: 700;
  color: #e8c080;
  letter-spacing: 2px;
}

.backpack-capacity {
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
}

.backpack-value-label {
  margin-left: auto;
  font-size: 11px;
  color: #888;
}

.backpack-value {
  font-size: 14px;
  font-weight: 700;
  color: #e8a040;
  font-variant-numeric: tabular-nums;
}

/* 结算按钮 */
.settle-btn {
  height: 24px;
  padding: 0 12px;
  background: linear-gradient(180deg, #3a5a3a 0%, #2a4a2a 100%);
  border: 1px solid #4a8a4a;
  border-radius: 3px;
  color: #a0e0a0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  outline: none;
}
.settle-btn:hover {
  background: linear-gradient(180deg, #4a6a4a 0%, #3a5a3a 100%);
  border-color: #5aaa5a;
  color: #c0f0c0;
}

/* 背包主体：左列（图标+丢弃） + 网格，横向排列 */
.backpack-body {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.backpack-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 6px;
}

/* 背包图标格：和格子一样大，独立在网格左侧 */
.backpack-icon-cell {
  width: 80px;
  height: 80px;
  background: #1e1e22;
  border: 1px solid #3a3a3e;
  border-right: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.backpack-icon-img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.backpack-icon-name {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  color: #e8c080;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 背包网格：格子大小和保险箱一致（80px） */
.backpack-grid {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(4, 80px);
  gap: 0;
  background: #1a1a1e;
  border: 1px solid #3a3a3e;
  border-radius: 0 3px 3px 0;
  position: relative;
}

.backpack-grid .grid-cell {
  width: 80px;
  height: 80px;
  background: #1e1e22;
  border: 1px solid #3a3a3e;
  position: relative;
}

.backpack-grid .grid-cell.drop-target {
  background: rgba(196, 130, 58, 0.25);
  border-color: #c4823a;
  box-shadow: inset 0 0 8px rgba(196, 130, 58, 0.3);
}

.backpack-grid .grid-cell.drop-invalid {
  background: rgba(196, 58, 58, 0.2);
  border-color: #c43a3a;
}

/* 背包中的物品：物品上直接绘制 80px 网格线，保证背景格子始终可见 */
.backpack-grid .item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(to right,
      transparent 0, transparent 79px,
      rgba(58, 58, 62, 0.9) 79px, rgba(58, 58, 62, 0.9) 80px),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 79px,
      rgba(58, 58, 62, 0.9) 79px, rgba(58, 58, 62, 0.9) 80px);
}

.backpack-grid .item .item-icon {
  position: relative;
  z-index: 1;
}

.backpack-grid .item {
  border: 1px solid #444448;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: grab;
  position: relative;
}

.backpack-grid .item .item-name { opacity: 1; }
.backpack-grid .item .item-quantity { opacity: 1; }
.backpack-grid .item .item-action { opacity: 1; }
.backpack-grid .item .item-mask { display: none; }

/* 背包物品品质背景色 */
.backpack-grid .item.quality-white {
  background: linear-gradient(180deg, rgba(42,42,46,0.5) 0%, rgba(34,34,38,0.5) 100%);
  border-color: #555558;
}
.backpack-grid .item.quality-green {
  background: linear-gradient(180deg, rgba(26,46,26,0.5) 0%, rgba(20,34,20,0.5) 100%);
  border-color: #3a8a3a;
  box-shadow: inset 0 0 12px rgba(58, 138, 58, 0.2);
}
.backpack-grid .item.quality-blue {
  background: linear-gradient(180deg, rgba(26,26,62,0.5) 0%, rgba(20,20,48,0.5) 100%);
  border-color: #3a5aaa;
  box-shadow: inset 0 0 12px rgba(58, 90, 170, 0.2);
}
.backpack-grid .item.quality-purple {
  background: linear-gradient(180deg, rgba(46,26,62,0.5) 0%, rgba(34,20,48,0.5) 100%);
  border-color: #8a3aaa;
  box-shadow: inset 0 0 12px rgba(138, 58, 170, 0.25);
}
.backpack-grid .item.quality-gold {
  background: linear-gradient(180deg, rgba(62,46,26,0.5) 0%, rgba(48,34,20,0.5) 100%);
  border-color: #c49a3a;
  box-shadow: inset 0 0 12px rgba(196, 154, 58, 0.3);
}
.backpack-grid .item.quality-red {
  background: linear-gradient(180deg, rgba(62,26,26,0.5) 0%, rgba(48,20,20,0.5) 100%);
  border-color: #c43a3a;
  box-shadow: inset 0 0 12px rgba(196, 58, 58, 0.3);
}

/* 背包物品图标不拉伸 */
.backpack-grid .item-icon img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- 垃圾桶 ---------- */
.trash-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  background: linear-gradient(180deg, #2a1a1a 0%, #1e1414 100%);
  border: 1px dashed #5a3a3a;
  border-radius: 4px;
  color: #aa6060;
  font-size: 12px;
  transition: all 0.15s;
  user-select: none;
}

.trash-zone.drag-over {
  background: linear-gradient(180deg, #4a2020 0%, #3a1818 100%);
  border-color: #ff5050;
  border-style: solid;
  color: #ff8080;
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.3);
}

.trash-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.trash-icon svg {
  width: 34px;
  height: 34px;
}

/* 丢弃区：位于背包图标下方（格子左侧），占据整个网格左侧剩余区域，
   仅在拖动物品时显示 */
.trash-side {
  width: 80px;
  flex: 1 1 auto;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  border-style: dashed;
}

body.item-dragging .trash-side {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- 拖拽幽灵元素 ---------- */
.drag-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  border: 2px solid #c4823a;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drag-ghost img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  pointer-events: none;
}

.item.dragging-source {
  opacity: 0.3;
}

/* ---------- 结算弹窗 ---------- */
.settle-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.settle-overlay.visible {
  display: flex;
}

.settle-panel {
  width: 340px;
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1e1e22 0%, #16161a 100%);
  border: 1px solid #4a4a4e;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  padding: 24px 20px;
  text-align: center;
}

.settle-title {
  font-size: 18px;
  font-weight: 700;
  color: #e8c080;
  letter-spacing: 4px;
  margin-bottom: 16px;
}

.settle-amount {
  font-size: 15px;
  color: #e0e0e0;
  margin-bottom: 16px;
}
.settle-amount span {
  font-size: 24px;
  font-weight: 700;
  color: #e8a040;
  font-variant-numeric: tabular-nums;
}

.settle-items {
  text-align: left;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding: 8px;
  background: #1a1a1e;
  border: 1px solid #2a2a2e;
  border-radius: 4px;
}

.settle-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: #c0c0c0;
  border-bottom: 1px solid #222226;
}
.settle-item-row:last-child { border-bottom: none; }
.settle-item-row img {
  width: 24px; height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.settle-item-row .si-name { flex: 1; }
.settle-item-row .si-qty { color: #888; }
.settle-item-row .si-value { color: #e8a040; font-variant-numeric: tabular-nums; }

.settle-continue {
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, #5a3825 0%, #3d2518 100%);
  border: 1px solid #c4823a;
  border-radius: 4px;
  color: #f0d0a0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  outline: none;
}
.settle-continue:hover {
  background: linear-gradient(180deg, #6a4835 0%, #4d3528 100%);
  box-shadow: 0 0 12px rgba(196, 130, 58, 0.3);
}

/* ---------- 横屏模式：左右分屏 ---------- */
@media (orientation: landscape) {
  body {
    align-items: stretch;
    padding: 0;
  }

  .window {
    width: 100vw;
    margin-top: 0;
    min-height: 100vh;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: visible; /* 横屏下不裁切内容，避免格子边框被切掉 */
    padding-bottom: 12px;
  }

  /* 横屏下允许整页滚动 */
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .main-split {
    flex-direction: row;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 0 12px;
    justify-content: center;
    align-items: flex-start; /* 面板按内容高度，不被拉伸到屏幕底 */
  }

  /* 电脑画面：背包在左，保险箱在右 */
  .backpack-panel {
    order: 1;
    width: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    border: 1px solid #3a3a3e;
    border-radius: 4px;
    padding: 10px;
    gap: 8px;
    flex-shrink: 0;
  }

  .safebox-side {
    order: 2;
    flex: 1;
    /* 限制保险箱栏最大宽度：浏览器 ctrl 缩放/窗口变宽时不再被拉伸 */
    max-width: 560px;
    min-width: 0;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .safebox-heading {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-align: center;
    padding: 2px 0 6px;
  }

  .safebox-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px;
  }

  /* 横屏下用 1px 间隙透出底色作为格线，避免细边框被缩放渲染吞掉 */
  .safebox-grid {
    gap: 1px;
    padding: 1px;
    background: #3a3a3e;               /* 内部格线：1px 间隙透出底色 */
    border: 1px solid #4a4a4e;         /* 外框：和背包面板一样的外边界线，稍亮更清晰 */
    box-shadow: 0 0 0 1px #3a3a3e;     /* 再补一圈，缩放下外框绝不丢失 */
  }

  .safebox-grid .grid-cell {
    border: none; /* 格线由间隙透出，不再依赖 1px border */
  }
}

/* 结算按钮禁用态（搜索完毕前禁止结算） */
.settle-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}