.backpack-dialog.wide { max-width: 960px; }
.backpack-dialog .modal-body { padding: 34px 28px 18px; height:min(570px,calc(88dvh - 30px)); max-height:none; overflow:hidden; }
.backpack { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; }
.bag-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
.bag-heading p { margin:0; font-size:22px; color:#204d3c; }
.bag-heading small,.bag-footer small { color:#758477; font-size:12px; }
.bag-tabs { display:flex; gap:8px; border-bottom:1px solid #d5c68c; padding-bottom:10px; }
.bag-tabs button { background:#f3eccf; border:1px solid #caba7e; border-radius:8px; color:#436451; padding:10px 30px; font:inherit; min-height:42px; }
.bag-tabs button[aria-selected=true] { background:#245d49; color:#fff3c7; border-color:#bba254; }
.bag-content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px 2px 8px; }
.bag-items { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.bag-item { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:12px 8px; border:2px solid #d8cda0; border-radius:10px; background:#f8f4df; color:#244f3e; font:inherit; cursor:pointer; }
.bag-item.is-equipped { background:#e3efdf; border-color:#3b8064; box-shadow:0 0 0 1px #3b8064; }
.bag-item strong { font-size:14px; }.bag-item small { color:#738071; font-size:12px; }.bag-item.is-equipped small { color:#24724e; font-weight:700; }
.bag-item-art { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:126px; }
.bag-item.is-locked { background:#f5efd8; border-style:dashed; }
.bag-item.is-locked:disabled { opacity:1; cursor:default; }
.bag-lock { position:absolute; bottom:0; left:50%; transform:translateX(-50%); background:#234c3fe6; color:#fff4d0; border-radius:10px; padding:3px 9px; font-size:10px; white-space:nowrap; }
.bag-item .bag-collection { font-size:10px; color:#8b7a4f; }
.bag-official-note { color:#7a806d; font-size:12px; line-height:1.5; margin:14px 0 4px; }
.bag-footer > span { display:flex; gap:6px; }
.bag-face,.bag-back { display:block; width:80px; height:116.16px; border-radius:5.28px; overflow:hidden; box-shadow:0 2px 5px #16382b40; }
.bag-face .playing-card-art { width:100%; height:100%; }.bag-face { background:var(--card-paper,#fff); }
.bag-status { min-height:20px; margin:5px 0; color:#287653; font-size:13px; }
.bag-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid #d5c68c; }
.bag-empty { display:grid; place-items:center; align-content:center; min-height:210px; text-align:center; color:#6b8170; }.bag-empty>span{font-size:42px;color:#b4964d}.bag-empty h3{margin:8px 0}.bag-empty p{margin:4px 0 12px}
@media(max-height:600px) and (orientation:landscape) {
  .backpack-dialog { width:92vw; max-height:94dvh; }
  .backpack-dialog .modal-body { padding:23px 18px 12px; height:calc(94dvh - 30px); }
  .bag-heading { margin:0 0 8px; }.bag-heading p { font-size:17px; }.bag-heading small { font-size:10px; }
  .bag-tabs { padding-bottom:6px; }.bag-tabs button { min-height:36px; padding:6px 24px; font-size:12px; }
  .bag-content { min-height:0; padding:8px 2px; }.bag-items { gap:10px; }.bag-item { padding:8px; gap:4px; }
  .bag-item-art { height:84px; }.bag-face,.bag-back { width:54px; height:78.408px; border-radius:3.564px; }
  .bag-item strong {font-size:12px}.bag-item small{font-size:10px}
  .bag-status{margin:2px 0;min-height:16px;font-size:11px}.bag-footer{padding-top:6px}.bag-footer .btn{min-height:34px;padding:6px 18px;font-size:12px}.bag-empty{min-height:140px}
}