/* ============================================================================
   backpack.css — 天书奇谈游戏物品网格渲染（平台唯一物品展示样式）
   严格按 Flash 反编译源码还原，详见 itemuidesign.md
   ============================================================================ */

/* ── CSS 变量（可覆盖）── */
:root {
    --bp-cell-size: 48px;
    --bp-icon-size: 32px;
    --bp-gap: 2px;
    --bp-cols: 6;
    --bp-slot-bg: #4a3828;
    --bp-slot-border: #6b5038;
    --bp-slot-bg-empty: #2e2016;
    --bp-highlight-color: #F59E0B;
    --bp-tooltip-bg: rgba(0, 0, 0, 0.65);
    --bp-tooltip-border: #E0E709;
}

/* ── 网格容器 ── */
.bp-grid {
    display: grid;
    grid-template-columns: repeat(var(--bp-cols), var(--bp-cell-size));
    gap: var(--bp-gap);
    justify-content: start;
    background: #1a1008;
    border: 3px solid #3a2818;
    border-radius: 6px;
    padding: 8px;
    display: inline-grid;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
}

/* 紧凑模式：无外框 */
.bp-grid--compact {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* ── 格子 ── */
.bp-slot {
    width: var(--bp-cell-size);
    height: var(--bp-cell-size);
    background: var(--bp-slot-bg);
    border: 1px solid var(--bp-slot-border);
    position: relative;
    cursor: pointer;
    overflow: visible;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.bp-slot--empty {
    background: var(--bp-slot-bg-empty);
    cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.bp-slot--has-item:hover {
    border-color: var(--bp-highlight-color);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 8px rgba(245,158,11,0.5);
    z-index: 2;
}

/* ── 稀有度色条 ── */
/* Flash 源码中格子统一 panel_item_bg，无稀有度区分。
   稀有度颜色通过 tooltip 内的 desc HTML <font color> 自然呈现。 */

/* ── 图标 ── */
.bp-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--bp-icon-size);
    height: var(--bp-icon-size);
    object-fit: contain;
    image-rendering: pixelated;
    z-index: 1;
}

.bp-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--bp-icon-size);
    height: var(--bp-icon-size);
    background: linear-gradient(135deg, #4a3828 25%, #3a2a1a 25%, #3a2a1a 50%, #4a3828 50%, #4a3828 75%, #3a2a1a 75%);
    background-size: 8px 8px;
    border: 1px solid #6b5038;
}

/* ── 数量角标 ──
   Flash 源码 _7d74f3b9...as:95  countField = getTextField(16777215, 12, false)
     · 颜色 0xFFFFFF / size 12 / bold=false（非粗体）
     · getTextField 第5参 DropShadow 默认 false → 无描边、无阴影
   定位 _7d74f3b9...as:202-203  x=32-textWidth-2, y=32-15
     → 压在 32×32 图标右下角像素上（距图标右 2px、贴图标底）
   web 端图标居中于 slot，偏移=(cell-icon)/2，故数字相对 slot 也落在图标右下角 */
.bp-count {
    --bp-count-off: calc((var(--bp-cell-size) - var(--bp-icon-size)) / 2);
    position: absolute;
    bottom: var(--bp-count-off);
    right: calc(var(--bp-count-off) + 2px);
    font-size: 12px;
    color: #FFFFFF;
    z-index: 2;            /* 高于 .bp-icon 的 z-index:1，确保数字压在图标之上（顶层） */
    pointer-events: none;
    line-height: 1;
}

/* 紧凑模式（邮件栏等小格）：仅缩字号，定位仍由 --bp-count-off 贴图标右下 */
.bp-grid--compact .bp-count { font-size: 10px; }

/* ── 状态角标（左上角，管理页标记开放/下架/暂停等）── */
.bp-badge {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 10px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    padding: 1px 3px;
    z-index: 3;
    pointer-events: none;
}
.bp-badge--off { color: #ff6b6b; }
.bp-badge--warn { color: var(--bp-highlight-color); }
.bp-badge--info { color: #94a3b8; }

/* ── 锁定/不可用：灰显遮罩 ── */
.bp-slot--locked { filter: grayscale(0.7) brightness(0.55); opacity: 0.75; }

/* ── 隐藏的 tooltip 内容容器（供 portal 读取）── */
.bp-tooltip-content { display: none; }

/* 图标缺失兜底：图标库未覆盖该 image_id 时，显示物品名前几字（绝对定位于格子底部） */
.bp-fallback-name {
    position: absolute;
    left: 1px; right: 1px; bottom: 1px;
    font-size: 8px; line-height: 1;
    color: #d0d0d0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ============================================================================
   Portal Tooltip — 渲染到 body 层，完全不受父容器裁剪
   Flash paintBackground: beginFill(0,0.65) + lineStyle(1,0xE0E709) + radius 3px
   ============================================================================ */

.bp-portal-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 360px;
    width: max-content;
    background: var(--bp-tooltip-bg);
    border: 1px solid var(--bp-tooltip-border);
    border-radius: 3px;
    padding: 3px 5px;
    font-size: 12px;
    color: #FFFFFF;
    pointer-events: none;
    box-shadow: none;
    text-align: left;
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
}

/* Tooltip 内价格信息条 */
.bp-tooltip-meta {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
    border-top: 1px solid rgba(224, 231, 9, 0.2);
    padding-top: 3px;
}

/* ============================================================================
   辅助：确保表格内也可见
   ============================================================================ */
.bp-grid--compact .bp-slot { overflow: visible; }
.collect-table td { overflow: visible !important; }
.collect-table { overflow: visible !important; }
.table-wrap { overflow: visible !important; }