/* ============================================================
 * pet_backpack.css · 梅 · 2026-09-05 花豆V1.1 F2a/F2b
 * 乐豆背包样式：入口大按钮 + 满宽弹窗（贴左右边/圆角仅上方）+ 三tab + 3×3 九宫格
 * 全部 .v11-bp- 私有前缀，不碰任何既有类；儿童向：圆角、大按钮、明亮暖色。
 * 纯 CSS，零依赖；375px 视口为主，移动端自适应。
 * ============================================================ */

/* ---------- 入口按钮（小屋装饰区下方） ---------- */
.v11-bp-entry-zone{
  padding: 6px 16px 10px;
  display:flex; justify-content:center;
}
.v11-bp-entry-btn{
  width:100%; max-width:420px;
  border:none; cursor:pointer;
  padding:16px 20px;
  border-radius:22px;
  font-size:20px; font-weight:900; letter-spacing:1px;
  color:#5A4500;
  background:linear-gradient(180deg,#FFD66B 0%,#FFB347 100%);
  border:3px solid #FFF3D6;
  box-shadow:0 5px 0 #D8901F, 0 8px 18px rgba(216,144,31,.35);
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, box-shadow .08s ease;
}
.v11-bp-entry-btn:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #D8901F, 0 3px 8px rgba(216,144,31,.3);
}

/* ---------- 遮罩 ---------- */
.v11-bp-mask{
  position:fixed; inset:0; z-index:99990;
  background:rgba(60,42,20,.45);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  -webkit-transition:opacity .25s ease, visibility .25s ease;
}
.v11-bp-mask.v11-bp-show{ opacity:1; visibility:visible; }

/* ---------- 面板：横向拉满贴屏幕左右边，圆角仅上方 ---------- */
.v11-bp-panel{
  width:100vw; max-width:560px;
  margin-left:0; margin-right:0; left:0;
  background:linear-gradient(180deg,#FFF8EC 0%,#FFEFd2 100%);
  border-radius:28px 28px 0 0;
  border-top:4px solid #FFD66B;
  box-shadow:0 -8px 30px rgba(120,80,20,.28);
  padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px));
  max-height:86vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(40%);
  transition:transform .28s cubic-bezier(.22,1.2,.36,1);
}
.v11-bp-mask.v11-bp-show .v11-bp-panel{ transform:translateY(0); }

/* ---------- 头部 ---------- */
.v11-bp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 6px 10px;
}
.v11-bp-title{
  font-size:21px; font-weight:900; color:#7A5310;
  display:flex; align-items:center; gap:6px;
}
.v11-bp-close{
  width:40px; height:40px; flex:none;
  border:none; cursor:pointer; border-radius:50%;
  background:#FFE3B0; color:#8a5a10;
  font-size:20px; font-weight:900; line-height:1;
  box-shadow:0 2px 6px rgba(180,120,20,.25);
  -webkit-tap-highlight-color:transparent;
}
.v11-bp-close:active{ transform:scale(.92); }

/* ---------- 三横切 tab ---------- */
.v11-bp-tabs{
  display:flex; gap:8px;
  background:#FFE9C4; border-radius:18px;
  padding:5px; margin-bottom:12px;
}
.v11-bp-tab{
  flex:1 1 0; min-width:0;
  border:none; cursor:pointer;
  padding:11px 4px; border-radius:14px;
  font-size:14px; font-weight:800; white-space:nowrap;
  color:#9a7f45; background:transparent;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.v11-bp-tab.on{
  background:linear-gradient(180deg,#FFC94D,#F5A623);
  color:#5A4500;
  box-shadow:0 3px 0 #D8901F, 0 3px 8px rgba(216,144,31,.3);
  transform:translateY(-1px);
}

/* ---------- 3×3 九宫格 ---------- */
.v11-bp-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.v11-bp-cell{
  position:relative;
  aspect-ratio:1/1;
  border-radius:18px;
  background:#FFFDF5;
  border:2.5px solid #F0E0BC;
  box-shadow:0 3px 0 rgba(214,180,110,.45);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px; padding:6px 4px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
.v11-bp-cell.v11-bp-can{ cursor:pointer; }
.v11-bp-cell.v11-bp-can:active{ transform:scale(.94); }

/* 大图标 */
.v11-bp-ico{
  font-size:38px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 2px 2px rgba(120,80,20,.18));
}
.v11-bp-ico img{ width:44px; height:44px; object-fit:contain; }
.v11-bp-name{
  font-size:12px; font-weight:800; color:#7A5C1E;
  text-align:center; line-height:1.2;
  max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

/* 数量角标（右下） */
.v11-bp-badge{
  position:absolute; right:6px; bottom:6px;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:12px;
  background:linear-gradient(180deg,#FF8A5C,#F2633B);
  color:#fff; font-size:13px; font-weight:900; line-height:22px;
  text-align:center;
  box-shadow:0 2px 5px rgba(220,80,40,.4);
  border:2px solid #fff;
}
/* 已穿戴标记 */
.v11-bp-eqtag{
  position:absolute; left:6px; top:6px;
  padding:2px 7px; border-radius:10px;
  background:#7E9F7A; color:#fff; font-size:10px; font-weight:800;
}
.v11-bp-equipped{
  border-color:#7E9F7A;
  background:#F0F8EE;
}

/* 数量 0 / 未持有：变灰不可点击 */
.v11-bp-disabled{
  background:#EFE9DD;
  border-color:#E0D8C6;
  box-shadow:none;
  cursor:not-allowed;
  opacity:.62;
}
.v11-bp-disabled .v11-bp-ico{ filter:grayscale(.9) brightness(.96); }
.v11-bp-disabled .v11-bp-name{ color:#A89C83; }
.v11-bp-disabled .v11-bp-badge{ background:#B9AE98; box-shadow:none; }

/* 空格子：淡淡 + 占位 */
.v11-bp-cell-empty{
  background:rgba(255,255,255,.45);
  border:2.5px dashed #E4D6B4;
  box-shadow:none;
  cursor:default;
}
.v11-bp-plus{
  font-size:40px; font-weight:300; color:#E0CE9E; opacity:.6; line-height:1;
}

/* 品质边框（高介：金/紫/红）—— 与商店 F3 同口径，emoji 兜底零新图 */
.v11-bp-cell.v11-q-gold{
  border-color:#E8B23A;
  background:linear-gradient(180deg,#FFF7E0,#FDEEC0);
  box-shadow:0 3px 0 rgba(200,149,26,.5), 0 0 0 1px rgba(232,178,58,.25);
}
.v11-bp-cell.v11-q-rare{
  border-color:#8A6FE0;
  background:linear-gradient(180deg,#F3EFFC,#E6DEFB);
  box-shadow:0 3px 0 rgba(106,79,200,.45), 0 0 0 1px rgba(138,111,224,.22);
}
.v11-bp-cell.v11-q-legend{
  border-color:#E0564A;
  background:linear-gradient(180deg,#FDECEB,#F9D9D6);
  box-shadow:0 3px 0 rgba(194,74,58,.45), 0 0 0 1px rgba(224,86,74,.22);
}
/* 高介角标抬高，不被品质边框遮 */
.v11-q-gold .v11-bp-badge{ background:#C8951A; }
.v11-q-rare .v11-bp-badge{ background:#6A4FC8; }
.v11-q-legend .v11-bp-badge{ background:#C24A3A; }

/* 底部提示 */
.v11-bp-foot{
  margin-top:12px; text-align:center;
  font-size:12.5px; font-weight:700; color:#B09A6A;
}

/* ---------- 喂食：食物 emoji 飘食浮层（小屋页兜底动画） ---------- */
.v11-bp-flyfood{
  position:fixed; left:50%; top:34%;
  font-size:40px; z-index:99995; pointer-events:none;
  transform:translateX(-50%);
  transition:top .9s ease-in, opacity .9s ease-in;
  opacity:1;
}
.v11-bp-flyfood.v11-bp-fly{ top:58%; opacity:0; }

/* ---------- 自建 toast（PetBean.toast 不在场时兜底） ---------- */
.v11-bp-toast{
  position:fixed; left:50%; top:20%; transform:translateX(-50%) scale(.9);
  z-index:99999; max-width:82vw;
  padding:12px 22px; border-radius:16px;
  background:rgba(60,42,20,.9); color:#FFF6E0;
  font-size:15px; font-weight:800; line-height:1.5; text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25); pointer-events:none;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.v11-bp-toast.v11-bp-toast-show{ opacity:1; transform:translateX(-50%) scale(1); }

/* ---------- 大屏（横屏/Pad）：弹窗仍贴左右但限高，九宫格不致过大 ---------- */
@media (min-width:760px){
  .v11-bp-grid{ max-width:520px; margin:0 auto; }
  .v11-bp-tabs{ max-width:520px; margin-left:auto; margin-right:auto; margin-bottom:12px; }
  .v11-bp-head{ max-width:520px; margin:0 auto; }
  .v11-bp-foot{ max-width:520px; margin-left:auto; margin-right:auto; }
}