/* Base backpack styles — design units only; game-screen uses backpack-v4.css overrides.
   Do NOT use viewport media queries or vw fonts here (breaks proportional scale). */
.bp-overlay{
  position:fixed;z-index:70;inset:0;display:grid;place-items:center;padding:8px;
  background:#15201078;backdrop-filter:blur(2px);
  font-family:"Noto Sans SC",Inter,system-ui,sans-serif;
}
.bp-panel{
  position:relative;width:min(96vw,430px);aspect-ratio:800/1360;
  padding:7.2% 7.2% 6.3%;box-sizing:border-box;color:#402b1c;
  background:url('../ui/svg/backpack-panel-frame.svg') center/100% 100% no-repeat;
  filter:drop-shadow(0 12px 11px #21140977);
}
.bp-header{height:7.6%;display:flex;align-items:center;justify-content:center;gap:8px}
.bp-header img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 1px #70401955)}
.bp-title{margin:0;font-size:28px;letter-spacing:.08em;text-shadow:0 2px #fff1c9}
.bp-close{
  position:absolute;right:8.3%;top:5.2%;width:37px;height:37px;border:3px solid #793319;border-radius:50%;
  background:linear-gradient(#ff785b,#dc3f2d);box-shadow:inset 0 2px #ffb096,0 3px 0 #8c321f;
  color:#fff7d9;font-size:27px;line-height:28px;font-weight:900;cursor:pointer;
}
.bp-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:1.2%}
.bp-tab{
  flex:1 1 30%;min-width:0;height:36px;border:0;
  background:url('../ui/svg/tab-normal.svg') center bottom/100% 100% no-repeat;
  color:#4b311e;font-weight:900;font-size:14px;white-space:nowrap;cursor:pointer;
}
.bp-tab[aria-selected=true]{background-image:url('../ui/svg/tab-selected.svg');color:#fff;text-shadow:0 1px #376115}
.bp-grid{
  height:49.8%;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
  gap:8px 7px;padding:4% 2.2% 2%;box-sizing:border-box;
}
.bp-slot{
  --kind:#b97928;position:relative;min-width:0;border:0;border-radius:13px;
  background:linear-gradient(180deg,#fffdf2 0%,#fff4d8 72%,#f9dfaa 100%);
  box-shadow:inset 0 0 0 2px #b77b3d,inset 0 0 0 4px #fff8dc,0 2px 2px #76502b33;
  color:#4a301f;cursor:pointer;transition:transform .12s ease,filter .12s ease;
}
.bp-slot:active{transform:translateY(1px) scale(.98)}
.bp-slot[aria-selected=true]{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 3px #ffd452,inset 0 0 0 5px #fff8cc,0 0 0 2px #f6a900,0 5px 9px #8b5b2640;
}
.bp-slot--empty{
  cursor:default;opacity:.34;
  background:url('../ui/svg/slot-empty.svg') center/100% 100% no-repeat;box-shadow:none;
}
.bp-slot--epic{box-shadow:inset 0 0 0 2px #9b5ae0,inset 0 0 0 4px #fff3ff,0 0 10px #ab62dc66}
.bp-slot--feed{--kind:#e99a1f}
.bp-slot--medicine{--kind:#318fd0}
.bp-slot--product{--kind:#69a932}
.bp-slot--trial{--kind:#9f58d7}
.bp-slot__halo{
  position:absolute;left:12%;right:12%;top:11%;height:52%;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe7a477 44%,transparent 72%);
}
.bp-slot--medicine .bp-slot__halo{background:radial-gradient(circle,#fff 0%,#bfe9ff77 44%,transparent 72%)}
.bp-slot--product .bp-slot__halo{background:radial-gradient(circle,#fff 0%,#d8f2b777 44%,transparent 72%)}
.bp-slot--trial .bp-slot__halo{background:radial-gradient(circle,#fff 0%,#e7cbff88 44%,transparent 72%)}
.bp-slot__icon{
  position:absolute;z-index:1;left:14%;top:7%;width:72%;height:55%;object-fit:contain;
  filter:drop-shadow(0 3px 2px #50331635);
}
.bp-slot__name{
  position:absolute;z-index:2;left:5%;right:5%;bottom:18%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:900;
}
.bp-slot__qty{
  position:absolute;z-index:3;right:-2px;top:-3px;display:grid;place-items:center;
  min-width:24px;height:24px;padding:0 4px;border:2px solid #fff0b9;border-radius:999px;
  background:#704019;box-shadow:0 2px 2px #3f241855;color:#fff;font-size:11px;font-weight:900;
}
.bp-slot__tag{
  position:absolute;z-index:4;left:-2px;top:-3px;padding:2px 6px;border:2px solid #fff1ff;
  border-radius:8px 8px 8px 2px;background:linear-gradient(#b96bec,#8739c4);
  box-shadow:0 2px 2px #51216c44;color:#fff;font-size:9px;font-weight:900;
}
.bp-slot__kind{
  position:absolute;z-index:2;left:12%;right:12%;bottom:4%;height:14px;border-radius:7px;
  background:var(--kind);color:#fff;font-size:9px;line-height:14px;font-weight:850;
  text-align:center;text-shadow:0 1px #51311f55;
}
.bp-page{height:4.5%;display:flex;align-items:center;justify-content:center;gap:14px;color:#76502b;font-weight:850;user-select:none}
.bp-page__arrow{
  width:26px;height:24px;padding:0;border:0;border-radius:50%;background:#e4a84a;color:#fff;
  font-size:23px;font-weight:900;line-height:20px;box-shadow:inset 0 1px #ffe4a4;
}
.bp-page__arrow:disabled{opacity:.3}
.bp-detail{
  height:22.8%;display:grid;grid-template-columns:28% 1fr;gap:4%;
  padding:3.5% 4% 2%;box-sizing:border-box;
}
.bp-detail__visual{
  display:grid;place-items:center;border-radius:13px;
  background:radial-gradient(circle,#fffdf0 0%,#f8e2ad 72%);box-shadow:inset 0 0 0 2px #d59b50;
}
.bp-detail__visual img{width:88%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 2px #50331635)}
.bp-detail__name{margin:0;font-size:20px;line-height:1.1}
.bp-detail__badge{
  display:inline-block;margin:4px 0 3px;padding:2px 9px;border-radius:10px;
  background:#9f58d7;color:#fff;font-size:11px;font-weight:850;
}
.bp-detail__badge--tradable{background:#64a72f}
.bp-detail__description{min-height:39px;margin:3px 0;font-size:13px;line-height:1.35}
.bp-detail__footer{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed #d2a765;padding-top:4px}
.bp-detail__owned{font-size:14px}
.bp-action{
  width:105px;min-height:43px;border:0;
  background:url('../ui/svg/button-primary.svg') center/100% 100% no-repeat;
  color:#fff9dd;font-weight:900;font-size:16px;text-shadow:0 2px #34200f;cursor:pointer;
}
.bp-action:disabled{filter:grayscale(.8);opacity:.6}
.bp-empty{grid-column:1/-1;display:grid;place-items:center;color:#927650}
.bp-empty::before{
  content:'';width:80px;height:80px;
  background:url('../ui/svg/icon-backpack.svg') center/contain no-repeat;opacity:.45;
}
@media (prefers-reduced-motion:reduce){.bp-slot{transition:none}}