/* (a copy of ui/shared/bbart.css for the account site's store - 2026-11-08: keep the two the same) */
/* Bohemian Banners' bundles drawn (ui/shared/bbart.js, 2026-11-08): the sealed pack, the chests, the coin, the vault - sized by --u. The game's
   store window and the account site's store (website-account keeps a copy, bbart.css) share it. */
.bpk { --w: 100; --e: calc(var(--w) * var(--u) / 100); --bg: linear-gradient(160deg, #8e2a1f, #4e130d 60%, #2a0a06);
  position: relative; width: calc(100 * var(--e)); height: calc(142 * var(--e)); border-radius: calc(3.5 * var(--e)); background: var(--bg); overflow: hidden;
  display: grid; place-items: center; transform-origin: 50% 100%;
  box-shadow: 0 calc(5 * var(--e)) calc(12 * var(--e)) rgb(0 0 0 / .65), inset 0 0 0 calc(1.2 * var(--e)) #c9a35b, inset 0 0 0 calc(3.4 * var(--e)) rgb(0 0 0 / .45), inset 0 0 0 calc(4 * var(--e)) rgb(201 163 91 / .5); }
.bpk.t-azure { --bg: linear-gradient(160deg, #3c64a0, #1b3358 60%, #0b1628); }
.bpk.t-vert { --bg: linear-gradient(160deg, #4e8446, #21401e 60%, #0d1a0b); }
.bpk.t-purpure { --bg: linear-gradient(160deg, #784485, #391d41 60%, #170b1b); }
.bpk.t-sable { --bg: linear-gradient(160deg, #4a3f33, #1b1510 60%, #0a0806); }
.bpk::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgb(255 255 255 / .035) 0 calc(2 * var(--e)), transparent calc(2 * var(--e)) calc(5 * var(--e))); }
.bpk::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 245 220 / .16) 42%, transparent 54%, transparent 70%, rgb(255 245 220 / .08) 78%, transparent 86%); }
.bpk-crimp { position: absolute; left: 0; right: 0; height: calc(7 * var(--e)); z-index: 2;
  background: repeating-linear-gradient(90deg, rgb(255 244 210 / .55) 0 calc(.5 * var(--e)), transparent calc(.5 * var(--e)) calc(2.2 * var(--e))), linear-gradient(180deg, #f2d998, #b8944c 60%, #7a5a22); }
.bpk-crimp.top { top: 0; }
.bpk-crimp.bot { bottom: 0; }
.bpk-t { position: absolute; top: calc(10 * var(--e)); left: 0; right: 0; z-index: 1; text-align: center; font: 400 calc(11 * var(--e))/1 var(--blackletter, var(--display, serif)); color: #efd391; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.bpk-crest { width: 50%; margin-top: calc(-6 * var(--e)); z-index: 1; filter: drop-shadow(0 calc(1.5 * var(--e)) calc(2 * var(--e)) rgb(0 0 0 / .6)); }
.bpk-crest svg { display: block; width: 100%; height: auto; }
.bpk-wax { position: absolute; bottom: calc(18 * var(--e)); left: 50%; transform: translateX(-50%) rotate(-8deg); z-index: 1; width: calc(19 * var(--e)); height: calc(19 * var(--e)); border-radius: 48% 52% 50% 50%;
  background: radial-gradient(circle at 38% 34%, #e0b050, #a07a2a 60%, #5a3e10); display: grid; place-items: center; color: #3a2408; font-size: calc(10 * var(--e)); line-height: 1;
  box-shadow: 0 calc(.6 * var(--e)) calc(1.5 * var(--e)) rgb(0 0 0 / .6), inset 0 0 0 calc(1.4 * var(--e)) rgb(0 0 0 / .12); }
.bpk-s { position: absolute; bottom: calc(10 * var(--e)); left: 0; right: 0; z-index: 1; text-align: center; font: 600 calc(4.6 * var(--e))/1 var(--sans, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: #e8c98a; white-space: nowrap; }

/* the art boxes */
.bb-artin { position: relative; margin: 0 auto; flex: none; isolation: isolate; }   /* its layers stay inside it: never over a dialog */
.bb-artin .placed { position: absolute; }
.bb-artin .kc.placed { transform-origin: 50% 60%; }
.bb-artin .kc.lit:not(.sz-b) { transform: none; }
.bb-artin .kc.sz-s .kc-type { font-size: calc(10.5 * var(--u) * var(--kc)); }
.svgl > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bb-glow { border-radius: 50%; background: radial-gradient(closest-side, rgb(214 166 60 / .32), rgb(214 166 60 / .08) 60%, transparent); pointer-events: none; }
.bb-glow.gold { background: radial-gradient(closest-side, rgb(255 205 110 / .45), rgb(214 140 50 / .14) 55%, transparent); animation: bb-breathe 3.2s ease-in-out infinite alternate; }
@keyframes bb-breathe { from { opacity: .7; } to { opacity: 1; } }
.bb-floor { height: calc(16 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .65), transparent); }
.a-hoard { border-radius: calc(10 * var(--u)); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(201 163 91 / .35); }
.a-hoard .vault > svg { overflow: hidden; }
.bb-artin .crown > svg { filter: drop-shadow(0 0 calc(10 * var(--u)) rgb(255 210 120 / .7)); }