/* The backpack window (art/production/BACKPACK_BRIEF.md): no title, the 14x10 grid in dark cells with thin gold borders
   and a faint diamond, and under it the keepsake satchel (the owner's bag, KEEPSAKES and the cells used) beside the
   gold total with Sort, the three materials and the Rune Verses banner. The frame is the shared .cw-frame nine-slice
   (ui-windows.css), whose corner scrollwork sits wholly in its corner slices. The pictures are the owner's, cut by
   tools/cut_backpack_art.py into assets/gen/ui/backpack/; the cells, boxes and the banner are drawn here (logged in
   the art ledger). Linked after runes.css; the phone sheet is in mobile.css. */

:root {
  /* One cell: a dark well with a thin gold rim, a darker inner line and a faint diamond (scales with --cell). */
  --bp-cell: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><defs><radialGradient id='w' cx='50%25' cy='44%25' r='72%25'><stop offset='0' stop-color='%231e1610'/><stop offset='1' stop-color='%230c0806'/></radialGradient></defs><rect x='1.6' y='1.6' width='44.8' height='44.8' rx='2.4' fill='url(%23w)' stroke='%23a67b3d' stroke-opacity='.82' stroke-width='1.25'/><rect x='3.4' y='3.4' width='41.2' height='41.2' rx='1.4' fill='none' stroke='%23000' stroke-opacity='.5'/><path d='M24 16.6 31.4 24 24 31.4 16.6 24Z' fill='none' stroke='%23a07a45' stroke-opacity='.24' stroke-width='1.1'/><path d='M24 21.2 26.8 24 24 26.8 21.2 24Z' fill='%23a07a45' fill-opacity='.16'/><path d='M24 12.4v2.8M24 32.8v2.8M12.4 24h2.8M32.8 24h2.8' stroke='%23a07a45' stroke-opacity='.18' stroke-width='1.1'/></svg>");
  /* A small gold diamond for the satchel box's corners. */
  --bp-corner: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 .8 11.2 6 6 11.2 .8 6Z' fill='%23d9a64c' stroke='%23fbe3a1' stroke-width='.8'/><path d='M6 3.8 8.2 6 6 8.2 3.8 6Z' fill='%236b4516'/></svg>");
  --bp-rim: rgba(196, 146, 70, .62);
  --bp-ink: #f3e1ad;
}

#backpackWindow { height: 720px; }
/* No inner gold rule here: the grid and the foot fill the frame, so the shared window's rule (ui-windows.css .cw-frame::before)
   cut across them (owner, 2026-09-26: "get rid of that border outside these boxes"). The soft inner shade stays. */
#backpackWindow .cw-frame::before { box-shadow: inset 0 0 45px rgba(0,0,0,.66); }
.backpack-body { position: absolute; inset: 12px 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }

/* ---- the cells (backpack, satchel) ---- */
.backpack-grid, .satchel-grid, #mInv .grid.m-grid { flex: none; margin: 0; border: 0; background-color: #0a0705; background-image: var(--bp-cell); background-size: var(--cell) var(--cell); box-shadow: none; }
.backpack-grid .qty, .satchel-grid .qty { right: 4px; bottom: 3px; font: 700 13px/1 Georgia, serif; color: #fff4dc; }
.satchel-grid .qty { right: 3px; bottom: 2px; font-size: 11px; }

/* ---- the foot: satchel on the left, gold, Sort, materials and Rune Verses on the right ---- */
.bp-foot { flex: none; display: flex; align-items: stretch; gap: 14px; width: 672px; height: 152px; }
.bp-satchel { flex: none; width: 334px; }
/* The satchel box (the desktop foot and the phone's Keepsakes view): a thin gold rim with a small diamond on each corner. */
.bp-satchel, #mInv .m-satchel { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px 6px; border: 1px solid rgba(206, 156, 76, .78); border-radius: 3px;
  background: linear-gradient(rgba(46, 31, 17, .74), rgba(13, 9, 5, .88));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 3px rgba(206, 156, 76, .13), inset 0 0 18px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45); }
:is(.bp-satchel, #mInv .m-satchel)::before, :is(.bp-satchel, #mInv .m-satchel)::after { content: ''; position: absolute; left: -6px; right: -6px; height: 12px; pointer-events: none;
  background: var(--bp-corner) left center / 12px no-repeat, var(--bp-corner) right center / 12px no-repeat; }
:is(.bp-satchel, #mInv .m-satchel)::before { top: -6px; }
:is(.bp-satchel, #mInv .m-satchel)::after { bottom: -6px; }
.bp-bag { flex: none; width: 88px; height: auto; margin: 2px 0 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7)); }
.bp-satchel-main { display: flex; flex-direction: column; gap: 5px; }
.bp-satchel-main header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.bp-satchel-main header b { color: #ecd294; font: 700 14px/1.1 Cinzel, Georgia, serif; letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.bp-count { color: #dcc79b; font: 600 14px/1.1 Georgia, serif; font-variant-numeric: tabular-nums; }

.bp-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.bp-row { display: flex; gap: 8px; height: 44px; }
/* Gold and the materials sit in plain dark wells with a thin rim. */
.bp-gold, .bp-pouch .mat, #mInv .m-pouch .mat { display: flex; align-items: center; border: 1px solid var(--bp-rim); border-radius: 3px; background: linear-gradient(#20170f, #0d0906); box-shadow: inset 0 0 12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 220, 150, .06); }
.bp-gold { flex: 1; min-width: 0; gap: 10px; padding: 0 12px 0 8px; }
.bp-gold img { flex: none; width: auto; height: 34px; }
.bp-gold b, .bp-pouch .mat b { color: var(--bp-ink); font: 700 20px/1 Cinzel, Georgia, serif; font-variant-numeric: tabular-nums; text-shadow: 0 2px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-pouch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; height: 40px; margin: 0; }
.bp-pouch .mat { min-width: 0; justify-content: center; gap: 10px; padding: 0 8px; cursor: default; }
.bp-pouch .mat img { flex: none; width: 30px; height: 32px; object-fit: contain; }
.bp-pouch .mat b { font-size: 18px; }

/* Buttons: two IDs outrun the shared bronze button rules (ui-layout.css) without !important. */
#ui #backpackWindow .bp-sort, #ui #backpackWindow .bp-verses { position: relative; margin: 0; border: 0; border-image: none; border-radius: 0; background: none; cursor: pointer; color: #f6e5b4; text-shadow: 0 1px 2px #000, 0 0 6px #000; transition: filter .14s, transform .14s; }
#ui #backpackWindow .bp-sort:hover, #ui #backpackWindow .bp-verses:hover { filter: brightness(1.14); }
#ui #backpackWindow .bp-sort:active, #ui #backpackWindow .bp-verses:active { transform: scale(.97); }
#ui #backpackWindow :is(.bp-sort, .bp-verses):focus-visible { outline: 2px solid #ffd66c; outline-offset: 2px; }
/* Sort: the owner's plate (widened by mirroring its plain stone, never stretched) with the label beside the icon. */
#ui #backpackWindow .bp-sort { flex: none; display: flex; align-items: center; justify-content: center; width: 115px; height: 44px; min-height: 0; padding: 0 9px 2px 58px; background: url('assets/gen/ui/backpack/sort_wide.webp') center / contain no-repeat; font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .04em; }
/* Rune Verses: a CSS banner (no banner art yet: the art ledger's ui/backpack/verse_banner) with a gold rim, a dark
   fill and a blue gem in a gold diamond at each end; the owner's book overlaps its left end. */
#ui #backpackWindow .bp-verses { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; min-height: 0; padding: 0 104px 1px; font: 700 18px/1 Cinzel, Georgia, serif; letter-spacing: .05em; isolation: isolate; }
/* The banner itself (the desktop .bp-verses and the phone's .m-verses, mobile.css): the rim, then the fill inside it. */
:is(.bp-verses, .m-verses)::before, :is(.bp-verses, .m-verses)::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
:is(.bp-verses, .m-verses)::before { inset: 0 12px; background: linear-gradient(#f5d487, #c58f3a 42%, #8a5a1f 72%, #5e3b12); }
:is(.bp-verses, .m-verses)::after { inset: 3px 15px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  background: linear-gradient(180deg, rgba(255, 214, 140, .18) 0 1px, transparent 1px 100%), radial-gradient(ellipse at 50% 0, rgba(255, 190, 110, .12), transparent 70%), linear-gradient(#34241a, #180f09 58%, #0b0704); }
:is(.bp-verses, .m-verses) > span { position: relative; white-space: nowrap; }
.bp-gem { position: absolute; top: 50%; left: 12px; z-index: 2; width: 19px; height: 19px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; pointer-events: none;
  background: radial-gradient(circle, #c9e8ff 0 1.5px, #4f93ff 3.5px, #1742a8 6px, #0b1f5c 7.4px, transparent 7.8px), linear-gradient(135deg, #fff1bd, #dca645 46%, #7d4f15);
  box-shadow: 0 0 0 1px #2e1a07, 0 0 7px rgba(90, 160, 255, .45); }
.bp-gem:last-child { left: calc(100% - 12px); }
.bp-book { position: absolute; left: 30px; top: 50%; z-index: 3; width: auto; height: 60px; transform: translateY(-50%) rotate(-5deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .8)); pointer-events: none; transition: transform .14s; }
.bp-verses:hover .bp-book { transform: translateY(-54%) rotate(-5deg) scale(1.04); }
.m-verses:active .bp-book { transform: translateY(-54%) rotate(-5deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) { #ui #backpackWindow :is(.bp-sort, .bp-verses), .bp-book { transition: none; } }